什么是HTML tabindex属性？

Question

tabindexHTML中使用的属性是什么？

Answer 1

tabindex是负责以下两件事的全局属性：

它设置了“可聚焦”元素的顺序，并且

它使元素“可聚焦”。

在我看来，第二件事比第一件事更为重要。默认情况下，很少有可聚焦的元素（例如<a>和表单控件）。开发人员经常在不可聚焦的元素（<div>，<span>等）上添加一些JavaScript事件处理程序（例如'onclick'），并使界面不仅响应鼠标事件而且响应键盘事件的方式（例如“ onkeypress”）是为了使此类元素具有针对性。最后，如果您不想设置顺序，而只是将您的元素tabindex="0"集中用于所有此类元素：

<div tabindex="0"></div>

另外，如果您不希望通过Tab键将其聚焦，请使用tabindex="-1"。例如，使用选项卡键遍历时，以下链接将不突出。

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Answer 2

当用户按下选项卡按钮时，将按照以下示例中的顺序，按照顺序1、2和3引导用户。

例如：

Name: <input name="name" tabindex="1"  />

Age: <input name="age" tabindex="3"  />

Email: <input name="email" tabindex="2"  />

Answer 3

该tabindex属性用来定义用户遵循的顺序，当他们使用Tab键在网页导航。默认情况下，自然制表顺序将与标记中的源顺序匹配。

tabindex content属性允许作者控制元素是否应该是可聚焦的，使用顺序焦点导航是否应可达，以及为了顺序焦点导航的目的，元素的相对顺序是什么。名称“标签索引”来自“标签”键在可聚焦元素之间导航的常用用法。术语“制表”是指前进通过可使用顺序焦点导航到达的可聚焦元素。

W3C建议：HTML5 

部分7.4.1顺序焦点导航和tabindex属性

将tabindex在0或开始任何正整数和增量向上。这是经常可以看到，因为在旧版本的Mozilla和IE的避免了值0，tabindex属性会从1开始，移动到2，只有2后，将它转到0，然后3.最大整数值tabindex是32767。如果元素相同，tabindex则tabindex将匹配标记中的源顺序。负值会从选项卡索引中删除该元素，因此它将永远不会被聚焦。

如果一个元素被分配tabindex的-1它会删除元素，它永远不会成为焦点，但焦点可以以编程方式使用给予的元素element.focus()。

如果您指定的tabindex属性没有值或为空值，它将被忽略。

如果将disabled属性设置在具有的元素上，则tabindex该元素将被忽略。

如果tabindex在页面内的任何位置设置了a ，而不管它相对于其余代码的位置如何（可能位于页脚，内容区域中的任何地方）（如果有），则tabindex制表符顺序将从该元素开始它显式地分配了tabindex大于0 的最小值。然后，它将在定义的元素之间循环，只有在将显式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默认情况下，A 不能聚焦，anchor标签可以。