在特定的div上禁用tab键

Question

我有以下的数据结构：

<div id="wrapper">
   <div id="div1">Some content</div>
   <div id="div2">Some content</div>
</div>

我想“禁用”div2上的Tab键，也就是当按下Tab键时，div2中的元素不会获得焦点。

有没有使用JavaScript/jQuery创建这个Tab键阻止器的简单方法？

- nepomucenobr

---

这只是我的最佳猜测，但输入字段具有tabindex属性。我会将其设置为-1。看看会发生什么。不过，这仅适用于输入字段。 - John Strickler

谢谢John，它可以使用div、iframe（类似于Facebook）等工作... - nepomucenobr

Answer 1

@John Strickler正确。可以使用tabindex属性更改Tab键的行为。这是元素将获得焦点的顺序。

使用<div id="div1" tabindex="-1">一些内容</div>，您可以防止焦点落在您的div上。

更多信息请参见：http://www.htmlcodetutorial.com/forms/_INPUT_TABINDEX.html

- Jason

---

是的，那就可以了。正是我来这里要发布的内容。 :) - Robin Maben

我从未考虑过这个... = / +1 因为保持简单而加分... :) - David Thomas

它不起作用，我在这个答案上测试过了。如果你聚焦评论文本字段并按下TAB键，焦点会切换到“添加评论”按钮。现在，如果你在按钮上执行“检查”操作，并在包围按钮的<div>中添加一个tabindex="-1"，然后重复实验，按钮仍然会被聚焦。 - Hi-Angel

如果您在 div 内部有输入，则此代码将无法正常工作: https://codepen.io/thdoan/full/mdzGdQj - thdoan

Answer 2

有一种相当简单的方法可以做到这一点，使用jQuery的focus()方法。给定以下简化的HTML：

<div id="first">
    <label for="first">Can tab to this input</label>
    <input type="text" id="first" />
</div>
<div id="second">
    <label for="second">Can't tab to this input</label>
    <input type="text" id="second" />
</div>
<div id="third">
    <label for="third">Can tab to this input</label>
    <input type="text" id="third" />
</div>

还有jQuery：

$('#second input').focus(
    function(){
        $('#third input:first').focus();
    });

JS Fiddle演示。

虽然这有点过于简化了。如果您发布您的确切标记，我们可能能够提供更多...定制的东西？

在上述实现中，它还防止了input通过单击事件或tab获得焦点，这降低了它的实用性，我想。

---

编辑以修改上述代码，以区分鼠标点击和键盘Tab的焦点：

$('#second input').bind('keyup mouseup',
                        function(e){
                            if (e.which == 9) {
                                // focus from tab
                                $('#third input:visible:first').focus();
                            }
                            else if (e.which == 1) {
                                // focus from click
                                return false;
                            }
                            else {
                                alert('God only knows, what buttons are you mashing..?');
                            }
                        });

修订后的JS Fiddle演示

- David Thomas

---

谢谢你的帮助，David。不过，我认为Jason的答案更简单 :) - nepomucenobr

当然是这样的，因此我给他的答案点赞 =) - David Thomas