4

タブキーを使用して、div内の要素のフォーカスを変更する必要があります。フォーカスをdiv内の要素から離さないでください。これはどのように行うことができますか。私はこのアプローチを試みています：

1）div内のすべての要素を配列に取得します

2）keypressイベントを配列内の各要素にバインドし、nxt要素をそれに渡します

3）フォーカスを次の要素に移す機能によるキー押下の処理。

サンプルコード：

var elements = jQuery('xxx');
elements.each(function (index, element) { 
  element.bind("keypress", { nxt:elements[index+1] }, function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
      e.data.nxt[0].focus();
    }
  });
});

私の疑問は、

1）タブキーの押下に焦点を当てることができるdivからすべての要素を取得する方法。

2）jQueryには、さまざまなタイプの要素を一度に取得できるものはありますか（1つのステートメントでinput + select + a + textareaを取得するなど）

3）このアプローチに価値がない場合は、提案してください。

4

4 に答える 4

3

このフィドルをチェックしてください。HTMLコードに役立つ場合があります

<div id="container">
    <input type="text" id="first"/>
    <input type="text" id="second"/>
    <input type="text" id="third"/>
</div>

JavaScriptコード：

var elems = $('div#container input');



 elems.each(function(index,element) {
    console.log(element);
    $(element).keydown(function(e) {
        var code = e.keyCode || e.which;
        console.log(code);
        if(code === 9) {
           $(this).next().focus();
           e.preventDefault();
        }
    })
})

http://jsfiddle.net/tmFFk/1/

于 2013-03-04T11:56:10.677 に答える
2

これにはjqueryは必要ありません。属性を使用tabIndexして切り替えることができます。 tabIndex。

<div tabIndex="1">asdasd</div>
<div tabIndex="2">asdasd 2</div>
<div tabIndex="3">asdasd 3</div>

デモ：tabIndex

于 2013-03-04T11:48:02.460 に答える
1

同様の問題が発生し、TABが影響するフィールドを制限する小さなjQueryUIプラグインを作成しました。あなたはそれを単純に使用します：

$(".someGroup").tabGuard();

.someGroupこれにより、ラッパー内のフィールドでタブが繰り返されます。このようにして、ページ上のさまざまなフォームをグループ化できます。フォーカスされているフォームは、意味がある場合はTABまたはShift+TABで繰り返し処理されます。ここでそれを見つけてください：

http://tomaszegiert.seowebsolutions.com.au/tabguard/index.htm

これを使用:tabbableして、TABが焦点を当てることができるすべての要素を取得し、ソースをチェックして、その実行方法を確認してください。お役に立てば幸いです。

于 2013-06-01T23:16:31.147 に答える
0

私が正しく読んでいる場合は、Tabキーを押してDIVを切り替える必要があります。仕様によると、TabindexはDivではサポートされていません。A、AREA、BUTTON、INPUT、OBJECT、SELECT、およびTEXTAREAでのみサポートされています。

質問に関しては、それは非常に珍しい要件ですが、非常に興味深いものです。私はこれを試したことがありませんが、クエリごとに論理的に提案することができます。

  1. .children（）を使用して、そのdiv内のすべての子要素を取得できます。

  2. すべてのセレクターをコンマで区切って一度に使用することも、クラスを与えることもできます。

それがうまくいくかどうか私に知らせてください。

于 2013-03-04T11:57:27.090 に答える