为什么$('[tabindex="1"]').focus()；专注于tabindex="2"？

Question

当提交按钮聚焦时，按下选项卡时，焦点应该返回到tabindex="1"。下面是HTML：

<input tabindex="1" id="tabindex1" value="tabindex='1'" autofocus>
<input tabindex="2" id="tabindex2" value="tabindex='2'">
<input tabindex="3" id="tabindex3" value="tabindex='3'">
<input tabindex="4" id="submit_button" type="submit">

下面是JQuery：

$("input").keydown(function (e) {
    if (e.which == 9 && $(":focus").attr("id") == "submit_button") {
        $('[tabindex="1"]').focus(); // Focuses on tabindex="2"!!!
        // $('#tabindex1').focus(); // Does the same thing
    }
});

和这是小提琴。在我的生活中，我不知道为什么它将使用tabindex="2"而不是tabindex="1"，甚至当我使用id属性而不是tabindex时，它也会这样做。我怎样才能去tabindex="1"

Update：下面来自索克汀普克和霍布斯的解决方案成功了。这里有把小提琴显示它与return false;一起工作，这里有一个小提琴，显示它与e.preventDefault();一起工作。后续问题:这两种解决方案之一比另一种更可取吗？

Answer 1

将return false添加到if语句的末尾：

$("input").keydown(function (e) {
    if (e.which == 9 && $(":focus").attr("id") == "submit_button") {
        $('[tabindex="1"]').focus(); // Focuses on tabindex="2"!!!
        // $('#tabindex1').focus(); // Does the same thing
        return false;
    }
});

<input tabindex="1" id="tabindex1" value="tabindex='1'" autofocus>
<input tabindex="2" id="tabindex2" value="tabindex='2'">
<input tabindex="3" id="tabindex3" value="tabindex='3'">
<input tabindex="4" id="submit_button" type="submit">

问题是，它关注的是第一个输入，然后浏览器执行默认操作，即将重点放在下一个输入上。因此，最终，它关注的是第二个输入。

返回false确保浏览器不采取默认行为。

Answer 2

您没有阻止默认操作，选项卡的默认操作是移动到下一个表索引。因此，您的回调使tabindex 1聚焦，然后选项卡键的默认行为聚焦到tabindex 2。