javascript 如何从 TAB 导航中跳过表单元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7241048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to skip a form element from TAB navigation?
提问by Marques Milpi
If I use TABon the keyboard then the cursor goes from 1 to 4 (1 → 2 → 3 → 4)
如果我TAB在键盘上使用，则光标从 1 到 4 (1 → 2 → 3 → 4)
How can I skip number 3? I would like go 1 → 2 → 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>
回答by Justin
If you set the tabindex = "-1" on the input itself of #3, you won't be able to tab to #3
如果您在#3 的输入本身上设置 tabindex = "-1"，您将无法切换到 #3
回答by Jay
Give the elements ID, and write a script on these lines...
给元素ID，并在这些行上写一个脚本......
function changeTabIndex()
{
document.getElementById('1').tabIndex="1"
document.getElementById('2').tabIndex="2"
document.getElementById('3').tabIndex="-1"
document.getElementById('4').tabIndex="3"
}
</script>
回答by Joel Purra
If using jqueryis ok, you can try SkipOnTab.
如果使用jquery 没问题，您可以尝试SkipOnTab。
SkipOnTab: A jQuery plugin to exempt selected form fields from the forward tab order.
SkipOnTab：一个 jQuery 插件，用于从向前选项卡顺序中排除选定的表单字段。
Just add data-skip-on-tab="true"to the elements (or containers) you want to skip. You can still click to focus them or go back using shift-tab.
只需添加data-skip-on-tab="true"到要跳过的元素（或容器）即可。您仍然可以单击以聚焦它们或使用shift-返回tab。
In your case:
在你的情况下：
<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>
See the simple demoand the business case demo. You can also try the forked jsfiddle with SkipOnTab.
请参阅简单演示和业务案例演示。您还可以使用 SkipOnTab 尝试分叉的 jsfiddle。
回答by tatterdemalian
Assuming there is a reason 3 needs to remain tabbable (such as an MVC view where the element is an input control and needs to remain part of the tab order, or else it won't send data back to the controller), you probably won't be able to actually skip it in both directions, and if you do find a way, it will depend on a bug that will be patched out without warning to bring the browser back into compliance with the W3 specifications regarding tab order.
假设有一个原因 3 需要保持可选项卡（例如 MVC 视图，其中元素是输入控件并且需要保留选项卡顺序的一部分，否则它不会将数据发送回控制器），您可能赢了'实际上无法在两个方向上跳过它，如果您确实找到了一种方法，它将取决于一个错误，该错误将在没有警告的情况下被修补，以使浏览器重新符合有关 Tab 键顺序的 W3 规范。
To skip in either the forward or reverse direction (but not both!), add an onfocusin() event handler to element 3, that calls focus() on the element immediately following or preceding it. If onfocus events were still allowed to pass the previously focused control in the event parameter (as event.relatedTarget), you could tell what the previously focused element was, and transfer control to the previous element if focus came from the next element. However, the W3 specification makes it clear that this is not compliant behavior, and HTML5-compliant browsers are required to pass null for event.relatedTarget, and do everything else in their capabilities to prevent any focus() event handler from having access to the identity of the previously focused control, specifically nulling out any such field before either a focus() or blur() event handler is called in client-side code.
要向前或向后跳过（但不能同时跳过！），请向元素 3 添加一个 onfocusin() 事件处理程序，该事件处理程序在紧随其后或之前的元素上调用 focus()。如果仍然允许 onfocus 事件在 event 参数中传递先前聚焦的控件（如 event.relatedTarget），则您可以知道先前聚焦的元素是什么，如果焦点来自下一个元素，则将控制转移到上一个元素。但是，W3 规范明确指出这是不合规的行为，并且 HTML5 合规的浏览器需要为 event.relatedTarget 传递 null，并尽其所能防止任何 focus() 事件处理程序访问先前集中控制的身份，
