跳到主要内容

解决非表单元素无法聚焦问题

· 阅读需 2 分钟
素明诚
素明诚
Full stack development

通常只有表单元素（如输入框和按钮）以及超链接默认可以聚焦。如果你想让其他元素（如 div, span, p 等）也能够聚焦，你可以使用 HTML 的 tabindex 属性来实现。

tabindex​

可聚焦但不改变 Tab 顺序

使用 tabindex="0" 可以让元素按照文档的自然流程接受键盘焦点，这不会影响原有的 Tab 顺序。

<div tabindex="0">我可以聚焦！</div>

可编程聚焦但不包括在 Tab 顺序中

使用 tabindex="-1" 可以使元素通过脚本调用 .focus() 方法获得焦点，但它不会通过 Tab 键获得焦点。

<div tabindex="-1" id="focusableDiv">点击按钮后我会聚焦！</div>
<button onclick="document.getElementById('focusableDiv').focus()">聚焦到上面的 DIV</button>

聚焦状态样式设置​

你可以为聚焦的元素定义 CSS 样式，以提供视觉反馈。

.focusablehover, .focusablefocus {
  outline 2px solid blue;  /* 聚焦或悬停时显示蓝色轮廓 */
}

JavaScript 管理聚焦​

使用 JavaScript 监听事件和处理聚焦：

const myElement = document.getElementById('myElement');
myElement.addEventListener('click', function() {
  this.focus();  // 点击时聚焦到元素
});

注意事项​

过度使用：虽然 tabindex 很有用，但过度使用（特别是大量使用 tabindex 大于 0 的值）可能会导致键盘导航混乱，不宜滥用。

无障碍：确保使用 tabindex 时不要破坏内容的可访问性。使用语义化的 HTML 标签和角色（role）属性来帮助辅助技术理解元素的意图。