什么是 HTML tabindex 属性？

What is the HTML tabindex attribute?

提问by sleep

What is the tabindexattribute used for in HTML?

tabindexHTML 中使用的属性是什么？

回答by Konstantin Smolyanin

tabindexis a global attributeresponsible for two things:

tabindex是一个全局属性，负责两件事：

1. it sets the order of "focusable" elements and
2. it makes elements "focusable".

1. 它设置“可聚焦”元素的顺序和
2. 它使元素“可聚焦”。

In my mind the second thing is even more important than the first one. There are very few elements that are focusable by default (e.g. <a> and form controls). Developers very often add some JavaScript event handlers (like 'onclick') on not focusable elements (<div>, <span> and so on), and the way to make your interface be responsive not only to mouse events but also to keyboard events (e.g. 'onkeypress') is to make such elements focusable. Lastly, if you don't want to set the order but just make your element focusable use tabindex="0"on all such elements:

在我看来，第二件事比第一件事更重要。默认情况下可聚焦的元素很少（例如 <a> 和表单控件）。开发人员经常在不可聚焦的元素（<div>、<span> 等）上添加一些 JavaScript 事件处理程序（如“onclick”），以及使您的界面不仅响应鼠标事件而且响应键盘事件的方法（例如'onkeypress'）是使这些元素可聚焦。最后，如果您不想设置顺序，而只是让您的元素可聚焦用于tabindex="0"所有此类元素：

<div tabindex="0"></div>

Also, if you don't want it to be focusable via the tab key then use tabindex="-1". For example, the below link will not be focused while using tab keys to traverse.

此外，如果您不希望它通过 Tab 键可聚焦，则使用tabindex="-1". 例如，下面的链接在使用 Tab 键遍历时不会被聚焦。

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

回答by Robert

When the user presses the tab button the user will be taken through the form in the order 1, 2, and 3 as indicated in the example below.

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

For example:

例如：

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

回答by davidcondrey

The tabindexis used to define a sequence that users follow when they use the Tab key to navigate through a page. By default, the natural tabbing order will match the source order in the markup.

该tabindex属性用于定义序列时，他们使用Tab键导航通过一个页面，用户遵循。默认情况下，自然 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 内容属性允许作者控制一个元素是否应该是可聚焦的，它是否应该使用顺序焦点导航可达，以及为了顺序焦点导航的目的元素的相对顺序是什么。“tab index”这个名字来自于“tab”键在可聚焦元素中导航的常见用法。术语“tabbing”是指通过使用顺序焦点导航可以到达的可聚焦元素向前移动。
W3C 建议：HTML5
第 7.4.1 节顺序焦点导航和 tabindex 属性

The tabindexstarts at 0 or any positive whole number and increments upward. It's common to see the value 0 avoided because in older versions of Mozilla and IE, the tabindex would start at 1, move on to 2, and only after 2 would it go to 0 and then 3. The maximum integer value for tabindexis 32767. If elements have the same tabindexthen the tabindex will match the source order in the markup. A negative value will remove the element from the tab index so it will never be focused.

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

If an element is assigned a tabindexof -1it will remove the element and it will never be focusable but focus can be given to the element programmatically using element.focus().

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

If you specify the tabindexattribute with no value or an empty value it will be ignored.

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

If the disabledattribute is set on an element which has a tabindex, the element will be ignored.

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

---

---

If a tabindexis 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 tabindexthen the tab order will start at the element which is explicitly assigned the lowest tabindexvalue above 0. It will then cycle through the elements defined and only after the explicit tabindexelements have been tabbed through, will it return to the beginning of the document and follow the natural tab order.

如果 atabindex设置在页面内的任何位置，而不管它相对于其余代码的位置（可能在页脚、内容区域、任何地方），如果有定义，tabindex则 Tab 键顺序将从元素开始它被明确指定为tabindex大于 0的最低值。然后它将循环通过定义的元素，并且只有在显式tabindex元素被制表符通过后，它才会返回到文档的开头并遵循自然的制表符顺序。

---

---

In the HTML4 spec only the following elements support the tabindex attribute: anchor, area, button, input, object, select, and textarea. But the HTML5 spec, with accessibility in mind, allows all elements to be assigned tabindex.

在 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>

is the same as

是相同的

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

because regardless of the fact that they are all assigned tabindex="1", they will still follow the same order, the first one is first, and the last one is last. This is also the same..

因为不管它们都被赋值了tabindex="1"，它们仍然会遵循相同的顺序，第一个在第一个，最后一个在最后。这也是一样。。

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

because you do not need to explicitly define the tabIndex if it's default behavior. A divby default will not be focusable, the anchortags will.

因为如果它是默认行为，则不需要显式定义 tabIndex。div默认情况下，A不会是可聚焦的，anchor标签会。

回答by Tom

Controlling the order of tabbing (pressing the tabkey to move focus) within the page.

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

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

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

回答by Eldamir

the values you set determine the order that your keyboard focus will move between elements on the website.

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

In the following example, the first time you press tab, your cursor will move to #foo, then #awesome, then #bar

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

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

If you have not defined tab indexes anywhere, the keyboard focus will follow the HTML tags of you page in the order in which they are defined in the HTML document.

如果您没有在任何地方定义标签索引，键盘焦点将按照它们在 HTML 文档中定义的顺序跟随您页面的 HTML 标签。

If you tab more times than you have specified tabindexes for, the focus will move as if there were no tabindexes, i.e. in the order of appearance of the HTML tags

如果您的 Tab 键次数多于您为其指定的 tabindexes，则焦点将移动，就好像没有 tabindexes 一样，即按照 HTML 标签的出现顺序

回答by Mulki

Normally, when the user tabs from field to field in a form (in a browser that allows tabbing, not all browsers do) the order is the order the fields appear in the HTML code.

通常，当用户在表单中的字段之间切换时（在允许 Tab 的浏览器中，并非所有浏览器都这样做）时，顺序是字段在 HTML 代码中出现的顺序。

However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using TABINDEX. The tabs then flow in order from lowest TABINDEX to highest.

但是，有时您希望 Tab 键顺序有点不同。在这种情况下，您可以使用 TABINDEX 为字段编号。然后选项卡按从最低 TABINDEX 到最高的顺序流动。

More info on this can be found here w3

关于这方面的更多信息可以在这里找到w3

another good illustration can be found here

另一个很好的插图可以在这里找到

回答by cherouvim

It can be used to alter the default form element focus navigation sequence.

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

So if you've got:

所以如果你有：

text input A

text input B

submit button C

by using the tab key you navigate through A->B->C. Tabindex allows you to change that flow.

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

回答by Aman Dhanda

In Simple words, tabindexis used to focus on elements. Syntax: tabindex="numeric_value"This numeric_valueis the weight of element. Lower value will be accessed first.

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

回答by Nesha Zoric

The HTML tabindexatribute is responsible for indicating if an element is reachable by keyboard navigation. When the user presses the Tab keythe focus is shiftedfrom one element to another. By using the tabindex atribute, the tab order flow is shifted.

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

回答by Kamal

Tabbing through controls usually happens sequentially as they appear on the HTML code.

浏览控件通常在它们出现在 HTML 代码中时按顺序发生。

Using tabindex, the tabbing will flow from control with the lowest tabindex to the control with the highest tabindex in tabindex sequential order

使用tabindex，tabbing将从tabindex最低的控件按tabindex顺序流向tabindex最高的控件