什么是HTML tabindex属性？

问题描述 投票：220回答：10

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

html tabindex
10个回答
296
投票

tabindex是global attribute，负责两件事：

  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>
0
投票

通过控件的Tab键通常按顺序发生，因为它们出现在HTML代码中。

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

55
投票

当用户按下标签按钮时，用户将按照下面的示例中所示的顺序1,2和3浏览表格。

例如：

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />
23
投票

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

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

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

如果tabindex设置在页面的任何位置，无论它与其余代码相关的位置（它可能位于页脚，内容区域，在哪里）如果有定义的tabindex，则Tab键顺序将从显式分配最低tabindex值的元素。然后，它将循环遍历定义的元素，并且只有在明确的tabindex元素被标记后，它才会返回到文档的开头并遵循自然的Tab键顺序。

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

--

For example

<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标签将是。

18
投票

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

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

8
投票

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

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

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

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

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

3
投票

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

所以，如果你有：

text input A

text input B

submit button C

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

3
投票

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

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

有关这方面的更多信息，请访问w3

另一个好的例子可以找到here

2
投票

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

1
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.