【发布时间】：2010-11-06 07:09:07
【问题描述】：
tabindex 属性在 HTML 中的用途是什么？
【问题讨论】：
【发布时间】：2010-11-06 07:09:07
【问题描述】：
tabindex 是一个global attribute 负责两件事：
- 它设置“可聚焦”元素的顺序和
- 它使元素“可聚焦”。
在我看来，第二件事比第一件事更重要。默认情况下可聚焦的元素很少（例如 和表单控件）。开发人员经常在不可聚焦的元素（ 另外，如果您不希望通过 Tab 键聚焦，请使用 、 等）上添加一些 JavaScript 事件处理程序（如“onclick”），以及使界面不仅响应鼠标事件而且响应键盘事件的方法（例如'onkeypress'）是为了使这些元素具有焦点。最后，如果您不想设置顺序，只想让您的元素具有焦点，请在所有此类元素上使用
tabindex="0"：
<div tabindex="0"></div>
tabindex="-1"。比如下面的链接在使用tab键遍历时不会被聚焦。<a href="#" tabindex="-1">Tab key cannot reach here!</a>
【讨论】：
-
我发现
<div tabindex>也可以。有理由不使用它吗？ -
使用 -1 的 tabindex 很方便跳过链接之类的事情。您可以将项目链接到您尝试将用户链接到的内容上方的某个内容，而无需访问链接到项目本身。
-
值得注意 - 答案可能应该更正 - 当您“不希望它被关注”时，值
-1不适合，而是当您想要防止键盘导航的结果。元素仍然可以聚焦，只是不能使用键盘。 -
@danijar 是的：这是违反规范的。根据html.spec.whatwg.org/multipage/…，“tabindex 属性（如果指定）必须具有一个有效整数值”。
-
-1是我对具有绝对位置且在标签集中时表现有趣的项目的解决方案的研究结束！ HOorraaayyyyy。
当用户按下选项卡按钮时，用户将按照以下示例中所示的顺序 1、2 和 3 进入表单。
例如：
Name: <input name="name" tabindex="1" />
Age: <input name="age" tabindex="3" />
Email: <input name="email" tabindex="2" />
【讨论】：
-
-->如果tabindex是-1呢？这是什么意思？
-
@AlyssaGono 您似乎还没有阅读 85 个赞成票的答案... tabindex 为 -1 意味着您无法通过按标签按钮到达该元素
tabindex 用于定义用户在使用 Tab 键浏览页面时遵循的顺序。默认情况下，自然跳位顺序将匹配标记中的源顺序。
tabindex 内容属性允许作者控制一个元素是否应该是可聚焦的，它是否应该可以使用顺序焦点导航来访问，以及为了顺序焦点导航的目的，元素的相对顺序是什么. “选项卡索引”这个名称来自于“选项卡”键在可聚焦元素中导航的常见用途。术语“tabbing”是指通过使用顺序焦点导航可以到达的可聚焦元素向前移动。
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 将匹配标记中的源顺序。负值将从标签索引中删除元素，因此它永远不会被聚焦。
如果一个元素被分配了一个tabindex 或-1，它将删除该元素并且它永远不会成为焦点，但可以使用element.focus() 以编程方式将焦点赋予该元素。
如果您指定的tabindex 属性没有值或为空值，它将被忽略。
如果在具有tabindex 的元素上设置了disabled 属性，则该元素将被忽略。
如果tabindex 设置在页面内的任何位置，无论它相对于其余代码的位置（它可能在页脚、内容区域、任何地方），如果有一个已定义的tabindex那么 tab 顺序将从显式分配的最低 tabindex 值高于 0 的元素开始。然后它将循环通过定义的元素，并且只有在显式 tabindex 元素被 tab 切换后，它才会返回到开头文档并遵循自然的 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 默认是不可聚焦的，anchor 标签可以。
【讨论】：
-
什么版本的 IE 和 Mozilla 在 1 而不是 0 开始
tabindex？ -
-1;这个答案有点困惑。您提到 IE 和 Firefox 的“旧版本”从 tabindex 1 而不是 tabindex 0 开始制表符...但这就是 all 浏览器所做的，正如规范所要求的那样！您也自相矛盾，首先说 "
tabindex从 0 开始" 但后来说 "tab 顺序将从上面明确分配最低tabindex值的元素开始0".
控制页面内的 Tab 键顺序（按 tab 键移动焦点）。
参考：http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1
【讨论】：
-
另外，使用 tabindex 可以通过鼠标点击来选择元素。 （添加虚线轮廓，可以使用
:focus设置样式） -
@Pumbaa80 你可以通过鼠标点击来选择任何输入元素，使用 ":focus" CSS 也是如此。 tabindex 属性是可选的。
-
这仅适用于输入元素。我的评论适用于任何类型的元素。有关示例，请参见 jsfiddle.net/XsYCj。
您设置的值决定了键盘焦点在网站元素之间移动的顺序。
在以下示例中，第一次按 Tab 时，光标将移动到 #foo，然后是 #awesome，然后是 #bar
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
如果您没有在任何地方定义选项卡索引，键盘焦点将按照 HTML 文档中定义的顺序跟随您页面的 HTML 标记。
如果您的 tab 次数超过了您指定的 tabindexes，焦点将像没有 tabindexes 一样移动，即按照 HTML 标记的出现顺序
【讨论】：
它可以用来改变默认的表单元素焦点导航顺序。
如果你有：
text input A
text input B
submit button C
使用 Tab 键在 A->B->C 中导航。 Tabindex 允许您更改该流程。
【讨论】：
简单来说，tabindex 用于关注元素。
语法：tabindex="numeric_value"
这个numeric_value 是元素的权重。较低的值将首先被访问。
【讨论】：
-
“将首先访问较低的值。” - 不太正确； 0 和负值有特殊含义。
HTML tabindex 属性负责指示元素是否可以通过键盘导航访问。 当用户按下 Tab 键 时，焦点会从一个元素转移 到另一个元素。通过使用 tabindex 属性，tab 顺序流被转移。
【讨论】：
在控件中的 Tab 切换通常按照它们出现在 HTML 代码中的顺序发生。
使用tabindex，制表符会按tabindex顺序从tabindex最低的控件流向tabindex最高的控件
【讨论】：