什么是HTML tabindex属性？

Question

tabindexHTML中使用的属性是什么？

Answer 1

tabindex是一个全局属性,负责两件事:

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

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

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键在网页导航.默认情况下,自然Tab键顺序将与标记中的源顺序匹配.

tabindex内容属性允许作者控制元素是否应该是可聚焦的,是否应该使用顺序焦点导航可以到达,以及为了顺序焦点导航的目的,元素的相对顺序是什么.名称"tab index"来自"tab"键的常用用途,用于浏览可聚焦元素.术语"标签"指的是使用顺序焦点导航向前移动可到达的可聚焦元素.
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具有a tabindex的元素上设置属性,则将忽略该元素.

如果tabindex在页面中的任何位置设置a ,无论它与其余代码相关的位置(它可能位于页脚,内容区域,在哪里)如果有定义的tabindex那么,Tab键顺序将从元素开始显式地指定了tabindex0以上的最低值.然后,它将循环遍历定义的元素,并且只有在显式tabindex元素被标记后,它才会返回到文档的开头并遵循自然的Tab键顺序.

在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标签会.

Answer 4

控制tab页面内的标签顺序(按键移动焦点).

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

Answer 5

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

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

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

如果您尚未在任何位置定义选项卡索引,则键盘焦点将按照您在HTML文档中定义它们的顺序跟随页面的HTML标记.

如果您标签的次数超过指定的tabindexs的次数,则焦点将移动,就像没有tabindexes一样,即按HTML标签的外观顺序排列

Answer 6

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

所以如果你有：

text input A

text input B

submit button C

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