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
    }
});

here's the fiddle。对于我的生活，我无法弄清楚为什么它会转到tabindex="2"而不是tabindex="1"，当我使用id属性而不是{{1}时，它甚至会这样做}。如何才能转到tabindex？

更新：以下soktinpk和hobbs的解决方案都有效。 Here's a fiddle显示它与tabindex="1"一起使用，这是一个小提示，显示它与return false;一起使用。后续问题：这两种解决方案中哪一种优于另一种？

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">

问题是，它侧重于第一个输入，然后浏览器执行默认操作，该操作将关注 next 输入。因此，最终，它侧重于第二个输入。

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

Answer 2

您没有阻止默认操作，标签的默认操作是移动到下一个tabindex。因此，您的回调关注tabindex 1，然后tab键的默认行为将tabindex 2聚焦。

为什么是$（＆＃39; [tabindex =＆＃34; 1＆＃34;]＆＃39;）。focus（）;专注于tabindex =＆＃34; 2＆＃34;？

2 个答案: