Question

我需要使用tab键更改div中元素的焦点。焦点不应该远离div中的元素。如何才能做到这一点。我正在尝试这种方法：

1）将div中的所有元素都放到数组

2）将一个按键事件绑定到数组中的每个元素并将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中获取可以关注Tab键的所有元素。

2）jQuery中是否可以一次性获取不同类型的元素。（例如，在一个语句中获取输入+ select + a + textarea）

3）如果这种方法不值得，请提出建议。

Answer 1

看看这个小提琴。它可能会帮助你 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/

Answer 2

你不需要jquery。您可以使用tabIndex属性进行切换。 tabIndex

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

演示：tabIndex

Answer 3

我有类似的问题，并创建了一个小的jQueryUI插件，限制了TAB影响的字段。你只是简单地使用它：

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

这将使选项卡迭代.someGroup包装器内的字段。这样，您可以在页面上对各种表单进行分组，并且如果有意义的话，焦点对齐的将继续在TAB或Shift + TAB上进行迭代。在这里找到它：

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

它使用:tabbable来获取TAB可以关注的所有元素，并随时查看源代码以了解其完成情况。我希望你会发现它很有用。

Answer 4

如果我正确阅读，您需要在Tab按下之间切换DIV。根据规范，Div不支持Tabindex。它仅支持A，AREA，BUTTON，INPUT，OBJECT，SELECT和TEXTAREA。

至于问题，这是一个非常不寻常的要求，但却非常有趣。我从来没有试过这个，但我可以逻辑地为你的每个问题提出我的建议：

您可以使用.children（）获取该div中的所有子元素。
您可以通过逗号分隔所有选择器，也可以为它们分类。

让我知道它是否成功。

获取div中的所有元素，并使用tab键导航该div中的这些元素

4 个答案: