4

我需要使用 Tab 键更改 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中获取所有可以关注tab键的元素。

2）jQuery中是否有任何东西可以一次获得不同类型的元素。（比如，在一个语句中获取输入+选择+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属性来切换。 选项卡索引。

<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 之间切换。根据规范，Div 不支持 Tabindex。它仅在 A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA 上受支持。

至于问题，这是一个非常不寻常但非常有趣的要求。我从未尝试过，但我可以为您的每个查询提供合乎逻辑的建议：

  1. 您可以使用 .children() 获取该 div 中的所有子元素。

  2. 您可以通过用逗号分隔它们来一次性使用所有选择器，或者您可以为它们提供类。

让我知道它是否有效。

于 2013-03-04T11:57:27.090 回答