Question

HTML中使用的tabindex属性是什么？

Answer 1

tabindex是global attribute，负责两件事：

设置“可聚焦”元素的顺序和
使元素“可集中”。

在我看来，第二件事比第一件更重要。默认情况下很少有可聚焦的元素（例如＆lt; a＆gt;和表单控件）。开发人员经常在不可聚焦的元素（＆lt; div＆gt;，＆lt; span＆gt;等）上添加一些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内容属性允许作者控制元素是否应该是可聚焦的，是否应该使用顺序焦点导航可以到达，以及为了顺序焦点导航的目的，元素的相对顺序是什么。名称＆＃34;标签索引＆＃34;来自＆＃34;标签的常用用法＆＃34;浏览可聚焦元素的关键。术语＆＃34; tabbing＆＃34;是指使用顺序焦点导航向前移动可到达的可聚焦元素 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的{{1}}是32767。如果元素具有相同的tabindex，则tabindex将匹配标记中的源顺序。负值将从选项卡索引中删除元素，因此永远不会聚焦。

如果为某个元素分配了tabindex -1，它将删除该元素并且它永远不会是可聚焦的，但可以使用element.focus()以编程方式将该焦点赋予该元素。

如果指定tabindex属性没有值或空值，则会忽略它。

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

如果tabindex设置在页面的任何位置，无论它与代码的其余部分相关（如果有定义的话，它可能位于页脚，内容区域中） {1}}然后Tab键顺序将从明确分配了最高tabindex值的元素开始。然后，它将循环遍历定义的元素，并且仅在明确的tabindex元素被标记后通过，它将返回到文档的开头并按照自然的Tab键顺序。

在HTML4规范中，只有以下元素支持tabindex属性：anchor，area，button，input，object，{{3} }和select。但是，考虑到可访问性的HTML5规范允许为所有元素分配tabindex。

-

例如

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"

因为如果它是默认行为，则不需要显式定义tabIndex。默认情况下，<div> <a></a> <a></a> <a></a> </div>无法调焦，div代码将为。

Answer 4

控制标签的顺序（按标签键移动焦点）。

参考：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页面的HTML标记。

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

Answer 6

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

所以，如果你有：

text input A

text input B

submit button C

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

Answer 7

通常，当用户在表单中从一个字段到另一个字段进行选项卡（在允许标签的浏览器中，而不是所有浏览器都这样做）时，顺序就是字段在HTML代码中出现的顺序。

但是，有时您希望Tab键顺序的流动方式略有不同。在这种情况下，您可以使用TABINDEX对字段进行编号。然后，标签按从最低TABINDEX到最高的顺序流动。

有关此内容的更多信息，请访问w3

可以找到另一个好的插图here

Answer 8

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

Answer 9

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

Answer 10

通过控件进行切换通常会按顺序发生，因为它们出现在HTML代码中。

使用tabindex，tabbing将从具有最低tabindex的控件流向具有tabindex连续顺序中最高tabindex的控件

什么是HTML tabindex属性？

10 个答案:

例如