如何在TAB导航中跳过表单元素？

Question

如果我在键盘上使用 TAB，光标会从1到4（1 → 2 → 3 → 4）。

我该如何跳过数字3？我想要的是1 → 2 → 4。

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3"></td><td><input type="text" value="4"></td></tr>
</table>

直播地址：http://jsfiddle.net/49Vca/

- Marques Milpi

---

您是否希望（3）可以通过鼠标选择，但不能通过Tab键进行选择？ 箭头和直接访问（在键盘上输入数值）怎么样？ - Pierre Lacave

Answer 1

如果您在#3的输入框上设置tabindex =“-1”，则无法通过使用Tab键访问#3。

- Justin

Answer 2

看一下tabIndex属性

- wong2

Answer 3

给这些元素赋予ID，并按以下方式编写脚本...

function changeTabIndex()
  {
  document.getElementById('1').tabIndex="1"
  document.getElementById('2').tabIndex="2"
  document.getElementById('3').tabIndex="-1"
  document.getElementById('4').tabIndex="3"
  }
</script>

- Jay

---

为什么要通过脚本设置？毫无意义。 - Tomalak

该操作已被标记为JavaScript和jQuery，因此我认为他需要使用JS进行相同的操作......我的错误。 - Jay

嗯... OP已经用了所有可能的标签。:) 但是从那个角度来看，答案是有效的。+1 - Tomalak

答案是有效的，除了一个事实，那就是“合法地”你不应该拥有以数字开头的ID。而且你实际上不需要为1、2或4设置tabindex，因为如果没有tabIndex，所有浏览器都会假定tabIndex为0，这样tab索引就变成它们在DOM中出现的顺序。 - Justin

Answer 4

如果使用jquery没有问题，您可以尝试SkipOnTab。

SkipOnTab：一个jQuery插件，用于免除选定表单字段的向前制表顺序。

只需将data-skip-on-tab="true"添加到要跳过的元素（或容器）中。您仍然可以单击以将其聚焦或使用shift-tab返回。

在您的情况下：

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3" data-skip-on-tab="true"></td><td><input type="text" value="4"></td></tr>
</table>

请查看简单演示和商业案例演示。您还可以尝试带有SkipOnTab的分支jsfiddle。

- Joel Purra

---

针对投票者：我构建了这个插件以添加功能（可预测的顺序，Shift-Tab），而不是做与纯HTML tabindex="-1" 完全相同的事情。请参见 https://github.com/joelpurra/skipontab/wiki/SkipOnTab-versus-tabindex - Joel Purra

Answer 5

假设有一个理由需要保持“3”具有制表功能（例如，MVC视图中元素是输入控件并且需要保持作为制表顺序的一部分，否则它将无法发送数据回控制器），您可能无法实际上在两个方向上跳过它，即使您找到了一种方法，也会依赖于一个错误，这个错误将被修补程序修复，以符合W3规范关于制表顺序的规定。

要在正向或反向（但不是同时）跳过，在元素3中添加一个onfocusin()事件处理程序，调用focus()函数在其后面或前面立即跟随的元素上。如果onfocus事件仍然允许事件参数（如event.relatedTarget）传递先前聚焦的控件，则可以知道先前聚焦的元素是什么，并在焦点来自下一个元素时将控制权转移到前一个元素。然而，W3规范明确说明这不是符合规范的行为，HTML5兼容的浏览器需要将event.relatedTarget设置为null，并尽其所能防止任何focus()事件处理程序在客户端代码中调用之前访问先前聚焦控件的标识，具体地说，在调用任何这样的字段之前将其置为空值。

- tatterdemalian