3

次へ+前へのボタンと閉じるボタンで画像をポップアップするライトボックススタイルのJavaScriptプラグインに取り組んでいます。タブがポップアップに表示された3つのボタン間でのみジャンプし、3つのボタンを通過してから、バックグラウンドでページコンテンツを続行しないようにします。

誰かがこれを行うための最良の方法について何か提案がありますか？現在、ポップアップが表示されたときにタブ可能な要素の配列を作成し、タブをキャプチャしてその配列設定を繰り返し、それぞれに焦点を合わせて防止することが最善の方法だと考えていますデフォルトのタブの動作。

これに関するベストプラクティスがあるかどうか誰かが知っていますか？

4

2 に答える 2

1

tabindex考えられる解決策は、タブ化したくない要素のプロパティを設定することのよう-1です。

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" tabindex="-1"/>
    <input type="button" value="also not tabbable" tabindex="-1"/>
</div>

これまでのところどのドキュメントにもこれは見つかりませんでしたが、テストしたすべてのブラウザ（FF 3.5、IE 6および7、Opera 9.64）で動作するようです。

もう1つのアプローチはblur()、不要な要素に焦点が当てられる場合です。

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur()"/>
    <input type="button" value="also not tabbable" onfocus="blur()"/>
</div>

このアプローチの欠点は、「abbable」要素をヒットするとすぐに要素が選択されず、次のタブが最初の要素から開始されることです。これは、後方にタブを付けるときに特に注意が必要ですが、これはもう不可能です。これに対する解決策は、正しい次の要素に積極的に焦点を当てることです。

<div>
    <input id="firstTabbable" type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
    <input id="lastTabbable" type="button" value="tabbable three" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/>
    <input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/>
</div>

しかし、私の意見では、これは少し複雑すぎます。

于 2009-12-04T09:48:39.160 に答える
1

ポップアップウィンドウを表示するときに次のことを試してみました。Firefox3で動作するようです。開始するには十分かもしれません。

$('#nonpopup a').attr('disabled','true');
$('#nonpopup input').attr('disabled','true');

JQueryセレクターは、idを持つdivにあるすべての要素Aと要素を検索し、html属性をに設定します。JQueryを使用していない場合は、これらすべての要素を見つけるために他の方法が必要になりますが、それはと同じくらい簡単かもしれません。inputnonpopupdisabledtruedocument.getElementsByTagName()

これにより、ブラウザがこれらの要素にタブで移動できないようになります。タブオーダーは引き続きページを離れ、URLバーなどのブラウザクロームをすべて通過します。

于 2009-12-01T14:29:05.880 に答える