tabindex

tabindex全局属性，指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。

示例

<p>Click anywhere in this pane, then try tabbing through the elements.</p>

<label>First in tab order:<input type="text"></label>

<div tabindex="0">Tabbable due to tabindex.</div>

<div>Not tabbable: no tabindex.</div>

<label>Third in tab order:<input type="text"></label>

<style>
.output {
    font: .9rem 'Fira Sans', sans-serif;
}

p {
    font-style: italic;
}

div,
label {
    display: block;
    letter-spacing: .5px;
    margin-bottom: 1rem;
}

div:focus {
    font-weight: bold;
}

</style>

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

• tabindex=负值(通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
• tabindex="0"，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
• tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex的数值递增而滞后获焦。如果多个元素拥有相同的tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。

根据键盘序列导航的顺序，值为0、非法值、或者没有tabindex值的元素应该放置在tabindex值为正值的元素后面。

如果我们在<div>上设置了tabindex属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置tabindex。查看这篇 fiddle 来理解 tabindex 的滚动影响。

注：tabindex的最大值不应超过 32767。如果没有指定，它的默认值为-1。

实例带有指定的 tab 键导航顺序的链接：

<a href="https://www.lanmper.cn/" tabindex="2">w3cschool</a><br />
<a href="https://www.lanmper.cn/" tabindex="1">google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">microsoft</a>

浏览器支持

所有主流浏览器都支持tabindex属性

定义和用法

tabindex 属性规定当使用"tab"键进行导航时元素的顺序。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中, tabindex 属性可用于任何的 HTML 元素(它会验证任何HTML元素。但不一定是有用)。

在 HTML 4.01中, tabindex 属性可用于:<a>、<area>、<button>、<input>、<object>、<select>、和<textarea>。

语法

<element tabindex="number">

属性值