所有可聚焦元素默认tabIndex值为0吗？模态框焦点捕获及可键盘聚焦元素获取相关技术问询

算力阿峰

2026-4-27

关于可聚焦元素默认tabIndex与模态框焦点捕获的问题解答

1. 是否所有可聚焦元素默认的tabIndex值均为0？

其实这个问题得拆开来理解：不是所有可聚焦元素的默认tabIndex都是显式写在DOM里的0，但原生交互式元素（比如<button>、带href的<a>、<input>、<select>、<textarea>这些）的可聚焦性是HTML规范内置的——你在标签里看不到tabindex属性，但用JavaScript获取element.tabIndex时会返回0。

而像<div>、<span>这类非交互式元素，默认是不可聚焦的，此时element.tabIndex会返回-1；只有当你给它们显式设置tabindex="0"或正整数时，它们才会变成可聚焦元素，这时候tabIndex值就是你设置的数字。

另外还有例外情况：比如<input type="hidden">即使设置了tabindex也不可聚焦；不带href的<a>标签默认也不可聚焦，它的tabIndex同样返回-1。

2. 模态框焦点捕获的实现与相关疑问

跨浏览器兼容性

你提到的原生交互式元素默认可聚焦的特性，在所有现代浏览器（Chrome、Firefox、Safari、Edge）里都是完全兼容的，这是HTML和无障碍规范（WAI-ARIA）里明确规定的行为，不用担心浏览器差异。

开发者是否需要了解原生元素的默认可聚焦性？

答案是肯定的！做模态框焦点捕获时，核心就是要正确识别模态框内的所有可聚焦元素——而原生交互式元素本身就自带可聚焦能力，完全不需要给它们额外加tabindex="0"。很多新手开发者可能会犯给按钮、输入框手动加tabindex的错误，其实完全没必要，反而可能破坏默认的Tab顺序。

正确的做法是，在获取模态框内的可聚焦元素时，用选择器覆盖两类元素：

所有原生交互式元素（button、带href的a、input、select、textarea等）
显式设置了tabindex≥0的非交互式元素（比如<div tabindex="0">）

举个常用的JavaScript选择器例子：

const modal = document.getElementById('your-modal');
const focusableElements = modal.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);

这个选择器就能精准拿到所有可通过Tab键聚焦的元素。

模态框焦点捕获的核心步骤

给你梳理下标准的实现流程：

打开模态框前，先保存当前页面的聚焦元素（const prevFocus = document.activeElement;）
模态框显示后，把焦点移到框内第一个可聚焦元素（focusableElements[0].focus();）
监听keydown事件，当用户按Tab或Shift+Tab时，判断当前聚焦的是第一个还是最后一个元素：
- 如果在最后一个元素按Tab，阻止默认行为，跳回第一个元素
- 如果在第一个元素按Shift+Tab，阻止默认行为，跳到最后一个元素
关闭模态框时，把焦点恢复到之前保存的元素（prevFocus.focus();）

这样就能实现符合无障碍标准的模态框焦点捕获了。

内容的提问来源于stack exchange，提问作者flasher1101