tabindex 属性在 HTML 中有什么用途？
10个回答
312
- 它设置“可聚焦”元素的顺序
- 它使元素“可聚焦”。
在我的想法中，第二个作用甚至比第一个更重要。默认情况下，有很少的元素是可聚焦的（例如 <a> 和表单控件）。开发人员经常在不可聚焦的元素（<div>、<span>等）上添加一些 JavaScript 事件处理程序（例如 'onclick'），而使这些元素可响应键盘事件（例如 'onkeypress'）的方法是使这些元素可聚焦。最后，如果您不想设置顺序，只需使用tabindex="0"将所有这样的元素变为可聚焦的：
<div tabindex="0"></div>
此外，如果您不希望通过Tab键集中焦点，则使用tabindex="-1"。例如，以下链接在使用Tab键遍历时不会被聚焦。
<a href="#" tabindex="-1">Tab key cannot reach here!</a>
- Konstantin Smolyanin
5
55
当用户按下Tab键时，用户将按照以下示例中指示的顺序1、2和3依次通过表单。
例如：
Name: <input name="name" tabindex="1" />
Age: <input name="age" tabindex="3" />
Email: <input name="email" tabindex="2" />
- Robert
2
如果tabindex为-1会怎样？这意味着什么？ - user2481398
8@AlyssaGono，你似乎没有阅读获得85个赞的回答......tabindex为-1意味着你不能通过按Tab键来访问该元素。 - John Ruddell
26
tabindex用于定义用户使用Tab键在页面上导航时遵循的顺序。默认情况下，自然的Tab顺序将与标记中的源顺序匹配。
tabindex内容属性允许作者控制元素是否应该是可聚焦的，是否可以使用顺序聚焦导航到达它，以及元素在顺序聚焦导航中的相对顺序。名称“tab index”来自使用“tab”键导航焦点元素的常见用法。术语“tabbing”指的是通过可以使用顺序聚焦导航到达的可聚焦元素向前移动。
W3C推荐：HTML5
第7.4.1节 顺序焦点导航和tabindex属性
tabindex 从0或任何正整数开始递增。通常避免使用值为0，因为在较早版本的Mozilla和IE中，tabindex将从1开始，移动到2，仅在2之后才会转到0，然后是3。 tabindex的最大整数值为32767。如果元素具有相同的tabindex，则tabindex将与标记中的源顺序匹配。负值将使元素从选项卡索引中删除，因此它永远不会被聚焦。如果为元素分配
tabindex -1，它将删除该元素，它将永远无法聚焦，但可以使用element.focus()在程序上给元素设置焦点。如果指定了没有值或空值的
tabindex属性，则将忽略它。如果在具有
tabindex的元素上设置了disabled属性，则该元素将被忽略。
如果页面中设置了
tabindex，无论它在代码的哪个位置（可以是页脚、内容区域等），只要有定义的tabindex，则制表符顺序将从明确分配的最低tabindex值的元素开始。然后，它将循环遍历定义的元素，在显式tabindex元素被遍历后，才会返回文档开头并遵循自然制表符顺序。
在HTML4规范中，只有以下元素支持tabindex属性：anchor、area、button、input、object、select和textarea。但是，考虑到无障碍性，HTML5规范允许所有元素被分配
tabindex。
--
例如<ul tabindex="-1">
<li tabindex="1"></li>
<li tabindex="2"></li>
<li tabindex="3"></li>
</ul>
是同义词
<ul tabindex="-1">
<li tabindex="1"></li>
<li tabindex="1"></li>
<li tabindex="1"></li>
</ul>
因为无论它们是否都被分配了tabindex="1"，它们仍然会按照相同的顺序进行，第一个是第一个，最后一个是最后一个。这也是一样的。
<div>
<a></a>
<a></a>
<a></a>
</div>
因为如果它是默认行为，你不需要显式地定义tabIndex。默认情况下，
div不可聚焦，而anchor标签可以。- davidcondrey
2
哪些版本的IE和Mozilla将
tabindex从0开始改为从1开始？ - arminrosu-1；这个答案有点混淆。你提到“旧版本”的IE和Firefox从tabindex 1开始标签，而不是tabindex 0...但这正是所有浏览器所要求的规范！你也自相矛盾，一开始说“
tabindex从0开始”，然后又说“标签顺序将从明确分配的最低tabindex值大于0的元素开始”。 - Mark Amery18
控制页面内使用tab键切换焦点的顺序。
参考文献：http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1
- Tom
3
6同时，设置tabindex可以使元素能够通过鼠标单击进行选择。（添加虚线轮廓，可以使用
:focus进行样式设置） - user123444555621@Pumbaa80 无论如何，您都可以通过鼠标单击选择任何输入元素，同样适用于使用“：focus”CSS。 tabindex属性是可选的。 - Drew
6这仅适用于输入元素。我的评论适用于任何类型的元素。请参见http://jsfiddle.net/XsYCj/，这是一个示例。 - user123444555621
8
你设置的值决定了键盘焦点在网站上移动的顺序。在下面的示例中，第一次按Tab键时，光标将移动到#foo，然后是#awesome，最后是#bar。
如果您没有定义任何的tab索引，键盘焦点将遵循网页中HTML标签的顺序。如果您按下tab键的次数超过了指定的tab索引数量，焦点将按照HTML标签在文档中出现的顺序移动。
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
如果您没有定义任何的tab索引，键盘焦点将遵循网页中HTML标签的顺序。如果您按下tab键的次数超过了指定的tab索引数量，焦点将按照HTML标签在文档中出现的顺序移动。
- Eldamir
3
它可以用于修改默认的表单元素聚焦导航顺序。
所以如果你有：
text input A
text input B
submit button C
通过使用Tab键，您可以在A -> B -> C之间进行导航。 Tabindex允许您更改该流程。
- cherouvim
2
简单来说，tabindex 用于聚焦元素。
语法：tabindex="数值"
这个 数值 是元素的权重。数值越小，被访问的优先级越高。
- Aman Dhanda
1
“较低的值将首先被访问。” - 这并不完全正确；0和负值具有特殊含义。 - Mark Amery
1
HTML的tabindex属性负责指示一个元素是否可以通过键盘导航到达。
当用户按下Tab键时，焦点从一个元素转移到另一个元素。通过使用tabindex属性，可以改变tab顺序流。
- Nesha Zoric
0
在 HTML 代码中，通过标签顺序逐个遍历控件。
使用 tabindex 属性，可以按照 tabindex 的顺序从具有最低 tabindex 值的控件流向具有最高 tabindex 值的控件。
- Kamal
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<div tabindex>也可以使用。有没有不使用它的原因？ - danijar-1标志着我对于那些绝对定位的项目，在被Tab键聚焦时表现怪异的解决方案的研究已经结束了！好耶！ - John Mutuma