关于tabindex

tabindex 是一个非常有用的属性，可以用来增加网站的可访问性，换句话说就是用户可以通过键盘来操作你的网站，而不只是能通过鼠标来操作。

tabindex 的值有三种情况：

tabindex 用于设置元素的聚焦顺序。默认情况下，HTML 元素的 tabindex 值为 0，表示元素按照其在 HTML 中出现的顺序依次聚焦。如果将 tabindex 值设置为负数，则表示该元素不能聚焦。当 tabindex 值为正数时，浏览器会按照该元素的 tabindex 值大小进行聚焦，即 tabindex 值越小的元素越先聚焦。

那么，我们怎么使用 tabindex 来支持键盘事件呢？其实非常简单，只需要给想要支持键盘事件的元素添加 tabindex 属性即可。举个例子，我们可以通过给 div 元素设置 tabindex，让其支持键盘事件：

<div tabindex="0" onkeydown="console.log('你按下了键盘中的某个按键!')">可聚焦的 div 元素</div>

在上面的示例代码中，你可以通过按下 Tab 键来聚焦，当该元素聚焦时，在键盘按下按键会在控制台输出一条日志。

在实际应用中，我们可以通过在元素上绑定键盘事件来对其进行操作，例如在按下 Enter 键时触发元素的点击事件。同时，也可以通过设置 tabindex 属性来控制元素的聚焦顺序，让用户可以通过键盘来方便地操作网页上的各个元素，如下代码所示。

<div>
  <button tabindex="2" id="btn2">Button 2</button>
  <button tabindex="1" id="btn1">Button 1</button>
  <button tabindex="3" id="btn3">Button 3</button>
</div>

接下来，实现用 js 实现键盘事件的监听，使其根据用户的操作来进行焦点的切换。

const buttons = document.querySelectorAll('button');
let currentButton = 1;

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab') {
    event.preventDefault();
    buttons[currentButton].blur();
    currentButton++;
    if (currentButton >= buttons.length) {
      currentButton = 0;
    }
    buttons[currentButton].focus();
  }
});

上述代码，简单实现了一个焦点切换的功能，当用户按下 Tab 键时，焦点会从当前（第二个按钮开始）的按钮切换到下一个按钮。当焦点切换到最后一个按钮时，再按下 Tab 键时，焦点会切换到第一个按钮。

你可以在如下的运行示例中查看效果。

See the Pen
tabindex示例 by Leevare (@leevare)
on CodePen.