12

<input type="text">本質的にフォーカス可能である（のように）か、または持っているなどの理由で、フォーカス可能な要素でいっぱいのドキュメントがあるとしましょうtabindex="0"。

ここで、モーダルダイアログボックスとして表示したいドキュメントのセクションがあり、ユーザーがダイアログボックスの外側に気を取られてほしくない場合を考えてみましょう。タブキーで、ダイアログボックスのコンテナ要素内のフォーカス可能な要素のみを循環させたいと思います。これを行う最も簡単な方法は何ですか？

可能であれば、ダイアログの内容やページの残りの部分を気にせず、それらを変更しようとしない解決策を探しています。つまり、たとえば、ダイアログの外側の要素をフォーカスできないようにしたくありません。まず、これには、可逆的な変更を行い、状態を追跡する必要があります。第二に、これには、要素をフォーカス可能にするためのすべての可能な方法を知る必要があります。これは、私には厄介で、壊れやすく、拡張性がないように感じます。

私の最初の試みはこのように見えますが、順方向（Tabキーを押す）でのみ機能します。逆方向（Shift + Tabを押す）では機能しません。

<div>Focusable stuff outside the dialog.</div>
<div class="dialog" tabindex="0">
  <!-- Focus should be trapped inside this dialog while it's open -->
  <div class="content">
    Form contents and focusable stuff here.
  </div>
  <div class="last-focus" tabindex="0" onfocus="this.parentNode.focus()"></div>
</div>
<div>More focusable stuff outside the dialog.</div>

純粋なJavaScriptソリューションが欲しいです。jQueryなどのライブラリでこれを行う手段がある場合は、これを行うライブラリコードへのリンクをお勧めします。

4

3 に答える 3

12

完全を期すために、@Domenicが提供したjQueryUIダイアログへのリンクを取得し、詳細を入力しています。

これをjQuery方式で実装するには、次の2つが必要です。

  1. フォーカスをトラップする必要があるモーダル要素をリッスンTabまたはShift+Tab（オン）します。keydownこれは、キーボードを介してフォーカスを移動する唯一の手段です。（ドキュメントの残りの部分とのマウスの相互作用を防ぎたい場合、それはマウスイベントが通過するのを防ぐための要素でそれをカバーすることによって解決される別の問題です。）

  2. モーダル要素内のすべてのタブ可能な要素を検索します。これらは、を持っているものを除いて、すべてのフォーカス可能な要素のサブセットですtabindex="-1"。

Tab前進します。Shift+Tab後方に行きます。Tabモーダル要素の最後のタブ可能な要素がフォーカスされているときに押すと、最初の要素がフォーカスされます。同様に、Shift+Tab最初のタブ可能な要素がフォーカスされているときに押すと、最後の要素がフォーカスされます。これにより、モーダル要素内でフォーカスが維持されます。

難しいのは、どの要素がタブ可能かを知ることです。タブ可能な要素はすべて、を持たないフォーカス可能な要素であるためtabindex="-1"、どの要素がフォーカス可能であるかを知る必要があります。要素がフォーカス可能かどうかを判断するプロパティがないため、jQueryは次の場合にハードコーディングすることでフォーカス可能にします。

  • input、、、、および無効selectにtextareaされていない要素。buttonobject
  • aおよびセットの数値areaを持っているまたは持っている要素。hreftabindex
  • tabindexsetの数値を持つ要素。

これらの3つのケースをチェックするだけでは十分ではありません。jQueryは、要素が表示されていることを確認します。これは、次の両方が当てはまる必要があることを意味します。

  • その祖先はどれもdisplay: noneです。
  • の計算値はvisibilityですvisible。これは、設定する最も近い祖先visibilityの値が。でなければならないことを意味しますvisible。祖先がvisibility設定されていない場合、計算値はvisibleです。

jQueryの:visibleセレクターは、「…のある要素は表示されていると見なされる」と表示されているため、この実装では正しく見えませんvisibility: hiddenが、フォーカス可能ではないことに注意してください。

于 2011-10-24T05:49:35.953 に答える
1

jQuery UIダイアログは、イベントをキャプチャしkeydown、それらがTAB用かどうかを確認してから、手動で正しい要素にフォーカスすることでこれを行います。

于 2011-10-24T03:06:29.600 に答える
0

jqModal jQueryプラグインは、modalオプションをtrueに設定することにより、これをすぐに実行します。フォーム付きのこのページの例はそれを示すはずです。コードを調べて何が起こっているのかを確認したことを覚えています。プレーンなJSを使用すると非常に簡単に実行できます。

于 2011-10-24T03:01:30.357 に答える