HTML tabindex 属性

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


实例

带有指定 tab 键顺序的链接:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <a href="http://www.baidu.com/" tabindex="2">百度</a><br>
  5. <a href="http://www.google.com/" tabindex="1">Google</a><br>
  6. <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
  7. <p><b>注释:</b>请尝试使用键盘上的 "Tab" 键在链接之间进行导航。</p>
  8. </body>
  9. </html>

浏览器支持

属性
partYesYesYesNoYes

几乎所有浏览器均 tabindex 属性,除了 Safari。


定义和用法

tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。

tabindex=负值 (通常是tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用。

tabindex=”0” ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的。

tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前DOM中的先后顺序决定。


提示和注释

注释:以下元素支持 tabindex 属性:<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

注意:如果我们在 <div> 上设置了 tabindex 属性,它的子元素内容不能使用箭头键来滚动,除非我们在内容上也设置 tabindex。tabindex 的最大值不应超过 32767。如果没有指定,它的默认值为 0。


语法

  1. <element tabindex="number">
属性值
描述
number规定元素的 tab 键控制次序(1 是第一个)。