tabindex="0" HTML 元素在 Tab 键顺序中的最后位置是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4115953/
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
Where do tabindex="0" HTML elements end up in the tabbing order?
提问by HELP
In what order are elements with a tabindexvalue of 0 focused when the web page is tabbed?
tabindex当网页被标签化时，值为 0 的元素以什么顺序聚焦？
采纳答案by Alan Haggai Alavi
The HTML specificationstates:
在HTML规范状态：
Elements that have identical tabindex values should be navigated in the order they appear in the character stream.
具有相同 tabindex 值的元素应该按照它们在字符流中出现的顺序进行导航。
回答by haltersweb
tabindexassignments are handled the following way (for elements that support the tabindexattribute):
tabindex分配按以下方式处理（对于支持该tabindex属性的元素）：
- Positive numbers (1,2,3...32767) are handled in tab order.
- 0 is handled in source order (the order it appears in the DOM)
- -1 is ignored during tabbing but is focusable.
- 正数 (1,2,3...32767) 按 Tab 键顺序处理。
- 0 按源顺序处理（它出现在 DOM 中的顺序）
- -1 在制表过程中被忽略但可以聚焦。
This information is taken from : http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
此信息取自：http: //www.w3.org/TR/html401/interact/forms.html#adef-tabindex
回答by Alohci
It's a bit more complicated than Alan Haggai Alavi's answer.
这比 Alan Haggai Alavi 的回答要复杂一些。
After parsing, IE8 and Opera do as the HTML4 spec says. Firefox and Chrome however use DOM order. This matters with malformed markup like this.
解析后，IE8 和 Opera 会按照 HTML4 规范的说明进行操作。然而，Firefox 和 Chrome 使用 DOM 顺序。这对于像这样的格式错误的标记很重要。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test case 1</title>
</head>
<body>
<form>
<table>
<tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
<div><input id="second" value="second in the character stream" tabindex="0"></div>
</table>
<form>
</body>
</html>
You might well argue that with malformed mark-up all bets are off anyway, so what about JavaScript?
您可能会争辩说，使用格式错误的标记无论如何都不会下注，那么 JavaScript 呢？
Consider this case:
考虑这个案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test case 2</title>
<script type="text/javascript">
moveFirst = function()
{
var f = document.getElementById("first");
f.parentNode.removeChild(f);
document.body.appendChild(f);
}
</script>
</head>
<body>
<form>
<table>
<tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
<tr><td><div><input id="second" value="second in the character stream" tabindex="0"></div></td></tr>
</table>
<form>
<div onclick="moveFirst()">move</div>
</body>
</html>
In this case, when a user clicks on "move", IE8, Firefox, Chrome and Opera all use DOM order, not character stream order.
在这种情况下，当用户点击“移动”时，IE8、Firefox、Chrome 和 Opera 都使用 DOM 顺序，而不是字符流顺序。
Finally HTML5offers pretty much no guarantees about the tab order between elements that have a tabindex of 0, merely stating that it should follow platform conventions.
最后，HTML5几乎不保证 tabindex 为 0 的元素之间的 Tab 键顺序，只是说明它应该遵循平台约定。
回答by Manohar Reddy Poreddy
An example is the best way to remember.
一个例子是最好的记忆方法。
Assume you are pressing Tab key on the keyboard
假设您正在按键盘上的 Tab 键
<button tabindex="0">one</button>
<button tabindex="-1">two</button>
<button tabindex="0">three</button>
<button tabindex="5">four</button>
First fourwill be focused during Tab press (because tabindex is highest)
then one(because tabindex is 0, next highest, but 1st displayed in the document)
then three(because tabindex is 0, same as above, but 2nd displayed in the document)
then nothing else (The twois never focused because tabindex is -1)
首先four将在 Tab 按下期间聚焦（因为 tabindex 最高）
然后one（因为 tabindex 为 0，次高，但在文档中显示第一个）
然后three（因为 tabindex 为 0，同上，但在文档中显示第二个）
然后什么都没有else （two永远不会聚焦，因为 tabindex 是 -1）
Why is tabindex="0" required? anyway tab stops at a button, right?
True, you can also have tab stop for a div, like:
为什么需要 tabindex="0"？反正制表符停在一个按钮上，对吗？
确实，您还可以为 div 设置制表位，例如：
<div tabindex="0">some content</div>
For example, this is good when you want a screen reader stop to attempt to read a text in a div.
例如，当您希望屏幕阅读器停止尝试阅读 div 中的文本时，这很好。
Hope that helped.
希望有所帮助。
回答by Kevin
tabindex="0"can include tabbing to non-page elements of the web browser, such as the URL address bar.
tabindex="0"可以包括跳转到 Web 浏览器的非页面元素，例如 URL 地址栏。
Tested to be the case for Firefox 32.03.
经测试适用于 Firefox 32.03。
