残念ながら、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
、ページの読み込み (またはリッスンするその他のイベント) に焦点が当てられます。