HTML tabindex 属性详解与键盘聚焦顺序

tabindex 作用

表示其元素是否可以聚焦，以及它在何处参与顺序键盘导航（通常使用 Tab 键)

tabindex=负值：表示元素是可聚焦的，但是不能通过键盘导航(tab 键)来访问到该元素，取值 -1~-999 之间没有区别，但为了可读性和一致性考虑，推荐使用 -1。
tabindex=0：表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的。
tabindex=正值：表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素； tabindex 数字越小，越先定位到。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。

以下元素默认支持 tabindex 属性：<a>, <area>, <button>, <input>, <select> 以及 <textarea>。

tip

元素可以聚焦，我们就可以给元素添加 :focus 属性改变其聚焦时的样式

示例

如下代码，定位顺序 tabindex=1/2/10/666/888 -> input -> tabindex=0

需要注意的是，tabindex 使用按键聚焦为上述结果的前提是没有点击页面，而是直接点击 tab 聚焦。如果点击页面，聚焦的结果是 input -> tabindex=0，tabindex 大于 0 的便不再聚焦了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    p {
      font-style: italic;
      font-weight: bold;
    }

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

    div:focus {
      font-weight: bold;
      color: red;
    }
  </style>
  <body>
    input
    <input type="text" />
    <div tabindex="0">由于我加了 tabindex 按 tab 时可以聚焦</div>
    <div>默认不可以聚焦</div>
    <div tabindex="666">tabindex=666</div>
    <div tabindex="-1">tabindex= -1</div>
    <div tabindex="1">tabindex=1</div>
    <div tabindex="2">tabindex=2</div>
    <div tabindex="0">tabindex=0</div>
    <div tabindex="-10">tabindex=-1</div>
    <div tabindex="-1">tabindex=-1</div>
    <div tabindex="10">tabindex=10</div>
    <div tabindex="0">tabindex=0</div>
    <div tabindex="888">tabindex=888</div>
  </body>
</html>