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/

Answer 1

如果在＃3的输入本身上设置tabindex =“ - 1”，您将无法选择＃3

Answer 2

查看tabIndex属性

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>

Answer 4

如果使用jquery即可，您可以尝试SkipOnTab。

SkipOnTab：一个jQuery插件，用于从前向标签顺序中豁免选定的表单字段。

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

在你的情况下：

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

Answer 5

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

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

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

5 个答案: