web-dev-qa-db-ja.com

tabindexを持つ最後の要素に移動した後、tabindexを1から繰り返す方法は？

たとえば、ここにスクリプトがあります。

<!-- 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"もう一度？

javascriptjqueryhtmltabindex
19
Lucas

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

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

フォーカスの変更方法にとらわれない、より普遍的なアプローチを提案します。

アイデアは、フォーム要素（「tabindexループ」を作成する場所）を、フォーカス可能な特別な「フォーカスガード」要素（タブインデックスが割り当てられている）で囲むことです。 ）。修正した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"割り当てられています。

もちろん、フォームが動的に生成される場合、これを動的環境でも機能させることができます。ちょうどあなたの focusable elements （それほど重要ではないタスク）を理解し、同じフォーカスガードでそれらを囲んでください。

お役に立てれば幸いです。何か問題がありましたらお知らせください。

[〜＃〜]更新[〜＃〜]

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

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

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

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

23
Dmitry Pashkevich

ここに他の要素を必要としない私の解決策。ご覧のように、要素は<form>要素内でループします。

$('form').each(function(){
    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
        first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
        }
    });
});
8
redexp

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

最後の入力とインターセプトでkeyupイベントを処理するのが最も簡単な方法だと思います TAB 使用法（および SHIFT+TAB そのことについては）

1
CyberDude

最初の入力に "autofocus"属性が設定されていることを考慮して、これが私の解決策です：

これをフォーム要素の後に追加します（HTML5では任意のタグにすることができます）：

<div tabindex="6" onFocus="document.querySelector('[autofocus]').focus()"></div>
1
Nicolas Goy

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

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

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

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

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

これがお役に立てば幸いです。

ありがとうございました

0
Nitesh Patil