24

たとえば、次のようなスクリプトがあります。

<!-- Random content above this comment -->
<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<!-- Nothing underneath this comment -->

ユーザーがタブを押して 6 つのテキストボックスを通過し、最後のテキスト ボックスに到達してタブを押すと、最初のコメントの上のコンテンツに移動しますよね? さて、どうやってtabindex="1"やり直すか。

4

5 に答える 5

24

残念ながら、JavaScript がないとそれを行うことはできません。最後の要素でキーが押されたのを聞いて( +TABではないことを確認してください)、ハンドラー内の最初の要素に手動でフォーカスを設定できます。ただし、このロジックをキーボード イベント (つまり、特定の入力方法) にバインドすることは普遍的ではなく、以下を使用すると機能しない場合があります。SHIFTTAB

  • モバイルブラウザ
  • その他のエンターテイメント デバイス (スマート テレビ、ゲーム コンソールなど - 通常、フォーカス可能な要素間をジャンプするために D-Pad を使用します)
  • アクセシビリティ サービス

焦点がどのように変化するかにとらわれない、より普遍的なアプローチを提案します。

フォーム要素 (「タブインデックス ループ」を作成したい場所) を、フォーカス可能な特別な「フォーカス ガード」要素 (タブインデックスが割り当てられている) で囲むという考え方です。変更した HTML は次のとおりです。

<p>Some sample <a href="#" tabindex="0">content</a> here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>

<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->

これらのガード要素でイベントをリッスンしfocus、フォーカスを適切なフィールドに手動で変更するだけです (簡単にするために jQuery を使用しています)。

$('#focusguard-2').on('focus', function() {
  // "last" focus guard got focus: set focus to the first field
  $('#firstInput').focus();
});

$('#focusguard-1').on('focus', function() {
  // "first" focus guard got focus: set focus to the last field
  $('#lastInput').focus();
});

ご覧のとおり、フォーカスが最初の入力から後方に移動したときに、最後の入力に戻るようにしました (たとえば、最初の入力のSHIFT+ TAB)。実際の例

入力フィールドの直前/直後にフォーカスされるように、フォーカス ガードにも tabindex 値が割り当てられていることに注意してください。tabindex を入力に手動で設定しない場合、両方のフォーカス ガードがtabindex="0"割り当てられている可能性があります。

もちろん、フォームが動的に生成される場合、動的環境でもこれをすべて機能させることができます。フォーカス可能な要素を見つけて(それほど重要な作業ではありません)、それらを同じフォーカス ガードで囲みます。

問題があればお知らせください。

アップデート

nbro が指摘したように、上記の実装にはTAB、ページの読み込み後にヒットした場合、最後の要素を選択するという望ましくない効果があります (これは、最初のフォーカス可能な要素である#focusguard-1にフォーカスし、最後の入力のフォーカスをトリガーするためです。それを軽減するには、最初にフォーカスする要素を指定し、別の小さな JavaScript でフォーカスすることができます。

$(function() { // can replace the onload function with any other even like showing of a dialog

  $('.autofocus').focus();
})

これにより、必要な要素にクラスを設定するだけでautofocus、ページの読み込み (またはリッスンするその他のイベント) に焦点が当てられます。

于 2013-01-14T08:23:55.890 に答える
1

はい、入力をタブで移動した後、タブの順序が指定されていない適切な要素にジャンプします。ただし、すべての「タブ可能な」要素をタブで移動すると、フォーカスはページコンテンツの「外側」にジャンプし、ブラウザのUI要素（タブ、メニュー、ブックマークなど）に移動します。

keyup最も簡単な方法は、最後の入力でイベントを処理し、TAB使用をインターセプトすることだと思います（さらに言えばSHIFT+ TAB）

于 2013-01-14T08:25:42.537 に答える
0

tabindex を増やすことをお勧めします。>100 で、「コンテンツ」コンテナの div に tabIndex を指定します。コンテンツ コンテナには、ex.99 の入力ボックスよりも小さい tabindex が必要であることに注意してください。

最後の入力ボックスでタブを押すと、javascript を使用して手動でコンテンツ div にフォーカスを設定します (タブ キーのキープレス ハンドラーを使用できます)。

document.getElementById("content").focus();

フォーカスを設定するには、「コンテンツ」に tabindex を指定する必要があります。

タブ フォーカスを押すと、最初の入力ボックスに自動的に移動します。

これが役立つことを願っています。

ありがとうございました

于 2013-01-14T08:06:38.647 に答える