在HTML中tabindex属性的用途是什么?
当前回答
tabindex用于定义用户在使用Tab键浏览页面时遵循的顺序。默认情况下,自然标签顺序将与标记中的源顺序匹配。
The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation. W3C Recommendation: HTML5 Section 7.4.1 Sequential focus navigation and the tabindex attribute
tabindex从0或任何正整数开始,并向上递增。通常会避免使用0值,因为在Mozilla和IE的旧版本中,tabindex会从1开始,然后移动到2,只有在2之后才会变成0,然后是3。tabindex的最大整数值是32767。如果元素具有相同的tabindex,则该tabindex将匹配标记中的源顺序。负值将从制表符索引中删除该元素,因此它将永远不会被聚焦。
如果一个元素被赋值为-1的tabindex,它将删除该元素,并且它将永远无法聚焦,但是可以通过使用element.focus()以编程方式将焦点赋予该元素。
如果指定的tabindex属性没有值或为空值,它将被忽略。
如果在具有tabindex的元素上设置了disabled属性,则该元素将被忽略。
If a tabindex is set anywhere within the page regardless of where it is in relation to the rest of the code (it could be in the footer, content area, where-ever) if there is a defined tabindex then the tab order will start at the element which is explicitly assigned the lowest tabindex value above 0. It will then cycle through the elements defined and only after the explicit tabindex elements have been tabbed through, will it return to the beginning of the document and follow the natural tab order.
在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是不可聚焦的,但锚标记可以。
其他回答
tabindex用于定义用户在使用Tab键浏览页面时遵循的顺序。默认情况下,自然标签顺序将与标记中的源顺序匹配。
The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation. W3C Recommendation: HTML5 Section 7.4.1 Sequential focus navigation and the tabindex attribute
tabindex从0或任何正整数开始,并向上递增。通常会避免使用0值,因为在Mozilla和IE的旧版本中,tabindex会从1开始,然后移动到2,只有在2之后才会变成0,然后是3。tabindex的最大整数值是32767。如果元素具有相同的tabindex,则该tabindex将匹配标记中的源顺序。负值将从制表符索引中删除该元素,因此它将永远不会被聚焦。
如果一个元素被赋值为-1的tabindex,它将删除该元素,并且它将永远无法聚焦,但是可以通过使用element.focus()以编程方式将焦点赋予该元素。
如果指定的tabindex属性没有值或为空值,它将被忽略。
如果在具有tabindex的元素上设置了disabled属性,则该元素将被忽略。
If a tabindex is set anywhere within the page regardless of where it is in relation to the rest of the code (it could be in the footer, content area, where-ever) if there is a defined tabindex then the tab order will start at the element which is explicitly assigned the lowest tabindex value above 0. It will then cycle through the elements defined and only after the explicit tabindex elements have been tabbed through, will it return to the beginning of the document and follow the natural tab order.
在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是不可聚焦的,但锚标记可以。
HTML tabindex属性负责指示一个元素是否可以通过键盘导航访问。 当用户按Tab键时,焦点从一个元素转移到另一个元素。通过使用tabindex属性,制表符顺序流被移位。
当用户按下tab按钮时,用户将按如下示例所示的顺序依次进入表单。
例如:
Name: <input name="name" tabindex="1" />
Age: <input name="age" tabindex="3" />
Email: <input name="email" tabindex="2" />
通过控件的标签通常在控件出现在HTML代码中时按顺序发生。
使用tabindex,制表符将按照tabindex顺序从最低的控件流向最高的控件
你设置的值决定了你的键盘焦点在网站元素之间移动的顺序。
在下面的例子中,当你第一次按tab键时,你的光标将移动到#foo,然后是#awesome,然后是#bar
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
如果您没有在任何地方定义标签索引,键盘焦点将按照HTML文档中定义标签的顺序跟随页面的HTML标记。
如果你标签的次数超过了你指定的标签索引,焦点将会移动,就好像没有标签索引一样,也就是说,按照HTML标签出现的顺序