什么是HTML tabindex属性？

tabindexHTML中的属性是什么？

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

1. 它设置了“可聚焦”元素的顺序，并且
2. 它使元素“可聚焦”。

在我看来，第二件事比第一件事更为重要。默认情况下，很少有可聚焦的元素（例如<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>

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

例如：

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

的 标签索引用于定义用户使用Tab键浏览页面时遵循的顺序。默认情况下，自然制表顺序将与标记中的源顺序匹配。

tabindex content属性允许作者控制元素是否应该是可焦点的，使用顺序焦点导航是否应该可到达，以及为了顺序焦点导航的目的，元素的相对顺序是什么。名称“标签索引”来自“标签”键的常用用法，以浏览可聚焦的元素。术语“制表”是指向前移动可通过使用顺序焦点导航到达的可聚焦元素。
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属性没有值或为空值，它将被忽略。

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

如果tabindex在页面内的任何位置设置了a ，而不管它相对于其余代码的位置如何（可能位于页脚，内容区域中的任何位置）（如果有定义），tabindex则制表符顺序将从该元素开始它显式地分配了tabindex大于0 的最小值。然后，它将在定义的元素之间循环，并且只有在对显式tabindex元素进行制表之后，它将返回到文档的开头并遵循自然的制表顺序。

在HTML4规范中，仅以下元素支持tabindex属性： 锚， 区， 纽扣， 输入， 目的， 选择和 文本区域。但是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标签可以。

控制tab页面内的制表顺序（按键可移动焦点）。

参考：http : //www.w3.org/TR/html401/interact/forms.html#h-17.11.1

您设置的值确定键盘焦点将在网站上的元素之间移动的顺序。

在下面的示例中，第一次按Tab时，光标将移至#foo，然后#awesome和#bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

如果未在任何位置定义选项卡索引，则键盘焦点将按照页面的HTML标签在HTML文档中的定义顺序排列。

如果您分页的次数超过了为其指定的tabindex次数，则焦点将移动，就好像没有tabindex一样，即按照HTML标记的出现顺序

它可用于更改默认表单元素焦点导航顺序。

因此，如果您有：

text input A

text input B

submit button C

通过使用Tab键，您可以浏览A-> B-> C。Tabindex允许您更改该流程。

通常，当用户在表单中从一个字段到另一个字段制表符时（在允许制表符的浏览器中，不是所有浏览器都可以这样做），顺序就是字段在HTML代码中出现的顺序。

但是，有时您希望制表符顺序的流动有所不同。在这种情况下，您可以使用TABINDEX对字段编号。然后，选项卡从最低TABINDEX到最高TABINDEX顺序流动。

有关更多信息，请参见此处w3

另一个很好的例证可以在这里找到

用简单的话来说，tabindex是用来关注元素的。语法：tabindex="numeric_value" 这numeric_value是元素的权重。较低的值将首先被访问。

HTML tabindex属性负责指示元素是否可以通过键盘导航到达。当用户按下Tab键时，焦点将从一个元素转移到另一个元素。通过使用tabindex属性，将切换Tab键顺序流。

控件之间的Tab键浏览通常会按顺序出现在HTML代码上。

使用tabindex，按Tabindex顺序依次从Tabindex最低的控件流到TabIndex最高的控件。