HTML tabindex属性是什么?

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

如果你有:

text input A


text input B


submit button C

通过使用tab键，您可以通过A->B->C进行导航。Tabindex允许你改变这个流程。

控制页内标签的顺序(按选项卡键来移动焦点)。

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

通过控件的标签通常在控件出现在HTML代码中时按顺序发生。

使用tabindex，制表符将按照tabindex顺序从最低的控件流向最高的控件

通常，当用户在表单中从一个字段切换到另一个字段时(在允许选项卡的浏览器中，并非所有浏览器都允许)，顺序是字段在HTML代码中出现的顺序。

然而，有时您希望制表符顺序略有不同。在这种情况下，可以使用TABINDEX对字段进行编号。然后，制表符按照TABINDEX从最低到最高的顺序流动。

更多信息可以在这里找到w3

另一个很好的例子是在这里

当用户按下tab按钮时，用户将按如下示例所示的顺序依次进入表单。

例如:

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

你设置的值决定了你的键盘焦点在网站元素之间移动的顺序。

在下面的例子中，当你第一次按tab键时，你的光标将移动到#foo，然后是#awesome，然后是#bar

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

如果您没有在任何地方定义标签索引，键盘焦点将按照HTML文档中定义标签的顺序跟随页面的HTML标记。

如果你标签的次数超过了你指定的标签索引，焦点将会移动，就好像没有标签索引一样，也就是说，按照HTML标签出现的顺序

tabindex是一个全球属性< em > < / em >，负责两件事:

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

在我看来，第二件事比第一件事更重要。在默认情况下，很少有元素是可聚焦的(例如<a>和表单控件)。开发人员经常在不可聚焦的元素(<div> <span>等等)，以及如何使你的界面不仅响应鼠标事件，而且响应键盘事件(例如。'onkeypress')是使这些元素可聚焦。最后，如果你不想设置顺序，而只是让你的元素可聚焦，可以在所有这些元素上使用tabindex="0":

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

另外，如果你不想通过tab键来聚焦，那么使用tabindex="-1"。例如，当使用tab键遍历时，下面的链接将不会被聚焦。

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

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

tabindex content属性允许作者控制一个元素是否应该是可聚焦的，是否应该使用顺序焦点导航到达它，以及为了顺序焦点导航的目的，元素的相对顺序是什么。“tab索引”这个名字来源于“tab”键在可聚焦元素中导航的常用用法。术语“制表”指的是通过顺序聚焦导航可以到达的可聚焦元素向前移动 W3C推荐标准:HTML5
顺序焦点导航和tabindex属性

tabindex从0或任何正整数开始，并向上递增。通常会避免使用0值，因为在Mozilla和IE的旧版本中，tabindex会从1开始，然后移动到2，只有在2之后才会变成0，然后是3。tabindex的最大整数值是32767。如果元素具有相同的tabindex，则tabindex将匹配标记中的源顺序。负值将从制表符索引中删除该元素，因此它将永远不会被聚焦。

如果一个元素被赋值为-1的tabindex，它将删除该元素，并且它将永远不可聚焦，但可以通过编程方式使用element.focus()将焦点赋予该元素。

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

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

如果tabindex被设置在页面的任何地方，而不管它与其余代码的关系在哪里(它可以在页脚，内容区域，任何地方)，如果有定义的tabindex，则制表符顺序将从显式分配的高于0的最低tabindex值的元素开始。然后循环遍历所定义的元素，只有在显式的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是不可聚焦的，而anchor标记可以。