HTML 如何使元素可聚焦

HTML 中聚焦指的是用户在使用键盘时能够使用 Tab 键或者其他快捷键将光标聚焦到页面上的某个元素上，并能够在该元素上进行交互操作。本文将介绍 HTML 中如何使元素可聚焦。

tabindex 属性

在 HTML 中，我们可以使用 tabindex 属性来标识一个元素是否可聚焦。tabindex 属性可以接受两个值：

• 数字：表示该元素的聚焦顺序，较小的数字将优先聚焦。同一数字的元素将按照它们在 HTML 树中出现的顺序进行聚焦。通常情况下，我们可以把 tabindex 属性值设置为 0，这意味着浏览器会按照它们在 HTML 树中出现的顺序来聚焦这些元素。
• -1：表示该元素不可聚焦，但可以被 JavaScript 脚本通过 focus() 方法聚焦。这种情况通常用于对话框等场景中，在对话框打开时仅允许聚焦到对话框内的元素。

<div tabindex="0">可聚焦的元素</div>
<div tabindex="-1">不可聚焦的元素</div>

需要注意的是，对于一些元素，比如 div，span 等，是默认不可聚焦的。如果需要让这些元素可聚焦，我们需要为它们设置 tabindex 属性才行。

聚焦后的样式

在默认情况下，聚焦到元素上时只会有一个简单的边框进行标识。如果需要更改聚焦时的样式，我们可以在 CSS 中为 :focus 伪类设置相应的样式。

div:focus {
  outline: 1px dashed blue;
}

这样，当用户聚焦到 div 上时，元素周围将会出现一个 1 像素宽的蓝色虚线框来标识它被聚焦了。

参考链接：

• MDN Web 文档： tabindex
• MDN Web 文档： :focus