如何从 TAB 导航中跳过表单元素？答案

【问题标题】：How to skip a form element from TAB navigation?如何从 TAB 导航中跳过表单元素？
【发布时间】：2011-11-06 15:35:53
【问题描述】：

如果我在键盘上使用 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/

【问题讨论】：

您是否希望它 (3) 可以通过鼠标而不是 Tab 键进行选择？箭头或直接访问（按键盘上的值）呢？

标签： javascript html forms

【解决方案1】：

看看tabIndex属性

【讨论】：

【解决方案2】：

如果您在 #3 的输入本身上设置 tabindex = "-1"，您将无法使用 tab 到 #3

【讨论】：

【解决方案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>

【讨论】：

为什么要通过脚本设置？没有意义。
操作员用 javascript 和 jQuery 对其进行了标记，所以我认为他需要使用 js 做同样的事情......我的错
嗯……OP 已经用所有可以想到的标签给它贴上了标签。 :) 但是，是的，从那个 POV 来看，答案是有效的。 +1
答案是有效的，除了“合法地”你不应该有一个以数字开头的 ID ......而且你实际上不需要将 tabindex 设置为 1 2 或 4 因为在所有浏览器中都没有 tabIndex 假定 tabIndex 为 0 ，标签索引成为它们在 DOM 中出现的顺序。

【解决方案4】：

如果使用jquery没问题，你可以试试SkipOnTab。

SkipOnTab: 一个 jQuery 插件，用于将选定的表单字段从向前的 Tab 顺序中排除。

只需将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>

见the simple demo 和the business case demo。你也可以try the forked jsfiddle with SkipOnTab。

【讨论】：

对于反对者：我构建插件是为了添加功能（可预测的顺序，shift-tab），而不是做与纯 HTML tabindex="-1" 完全相同的事情。见github.com/joelpurra/skipontab/wiki/SkipOnTab-versus-tabindex

【解决方案5】：

假设有一个原因 3 需要保持可选项卡（例如 MVC 视图，其中元素是输入控件并且需要保持选项卡顺序的一部分，否则它不会将数据发送回控制器），您可能实际上无法在两个方向上跳过它，并且如果您确实找到了一种方法，它将取决于一个错误，该错误将在没有警告的情况下被修补，以使浏览器重新符合关于标签顺序的 W3 规范.

要向前或向后跳过（但不能同时跳过！），向元素 3 添加一个 onfocusin() 事件处理程序，该处理程序在紧随其后或之前的元素上调用 focus()。如果仍然允许 onfocus 事件在事件参数中传递先前聚焦的控件（如 event.relatedTarget），则您可以判断先前聚焦的元素是什么，如果焦点来自下一个元素，则将控制转移到前一个元素。然而，W3 规范明确指出这不是兼容的行为，并且 HTML5 兼容的浏览器需要为 event.relatedTarget 传递 null，并尽其所能阻止任何 focus() 事件处理程序访问先前聚焦的控件的标识，特别是在客户端代码中调用 focus() 或 blur() 事件处理程序之前清除任何此类字段。

【讨论】：