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

How to skip a form element from TAB navigation?

本文关键字：表单 元素 导航 TAB      更新时间：2023-09-26

如果我在键盘上使用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的输入本身设置tabindex =" -1"，您将无法制表符为#3

看一下tabIndex属性

给出元素ID，并在这些行上写一个脚本…

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

如果使用jquery是ok的，您可以尝试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。

假设是有原因3需要保持tabbable(如MVC视图元素是一个输入控件,需要保持标签的一部分订单,否则它不会发送数据的控制器),你可能不会在两个方向能够跳过它,如果你找到一种方法,它将取决于一个错误将会不打补丁的警告将浏览器回遵守W3规范关于标签顺序。

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

相关文章：