tabindex

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

示例

Click anywhere in this pane, then try tabbing through the elements.
First in tab order: 
Tabbable due to tabindex.
Not tabbable: no tabindex.
Third in tab order:


.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;
} 

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

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

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

如果我们在

tabindex="2">w3cschool
tabindex="1">google
tabindex="3">microsoft

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com