235

tabindexHTML中使用的属性是什么？

4

10 回答 10

309

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>
于 2013-09-25T09:01:36.403 回答
55

当用户按下选项卡按钮时，用户将按照 1、2 和 3 的顺序浏览表单，如下例所示。

例如：

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />
于 2010-11-06T08:37:09.530 回答
25

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

tabindex 内容属性允许作者控制一个元素是否应该是可聚焦的，是否应该使用顺序焦点导航来访问它，以及为了顺序焦点导航的目的，元素的相对顺序是什么。“选项卡索引”这个名称来自于“选项卡”键在可聚焦元素中导航的常见用途。术语“选项卡”是指通过使用顺序焦点导航可以到达的可聚焦元素向前移动。
W3C 建议：HTML5
第 7.4.1 节顺序焦点导航和 tabindex 属性

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

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

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

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

如果 atabindex设置在页面内的任何位置，无论它相对于其余代码的位置（它可能在页脚、内容区域、任何地方）如果有定义tabindex，则选项卡顺序将从元素开始它显式地分配了tabindex高于 0 的最小值。然后它将循环遍历定义的元素，并且只有在显式tabindex元素被 Tab 键遍历后，它才会返回到文档的开头并遵循自然的 Tab 键顺序。

在 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。Adiv默认情况下是不可聚焦的，anchor标签会。

于 2015-02-01T19:21:26.760 回答
18

控制页面内的制表顺序（tab按键移动焦点）。

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

于 2010-11-06T07:12:36.400 回答
8

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

在以下示例中，第一次按 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 标记的出现顺序

于 2013-08-15T09:31:42.300 回答
3

它可以用来改变默认的表单元素焦点导航顺序。

所以，如果你有：

text input A

text input B

submit button C

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

于 2010-11-06T07:11:52.263 回答
3

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

但是，有时您希望制表符的顺序略有不同。在这种情况下，您可以使用 TABINDEX 对字段进行编号。然后选项卡按从最低 TABINDEX 到最高的顺序排列。

可以在此处找到更多信息w3

另一个很好的例子可以在这里找到

于 2010-11-06T07:16:47.867 回答
2

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

于 2015-03-20T00:11:37.470 回答
1

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

于 2018-05-04T09:12:55.163 回答
0

控件间的切换通常在它们出现在 HTML 代码中时按顺序发生。

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

于 2010-11-06T07:13:55.573 回答