一、tabindex值及其含义
| 值 | 键盘导航（Tab 键） | JS 聚焦 | 聚焦顺序规则 |
|---|---|---|---|
tabindex="-1" | ❌ 不可聚焦 | ✅ 支持 | 不参与 Tab 键序列，只能通过 element.focus() 编程聚焦 |
tabindex="0" | ✅ 可聚焦 | ✅ 支持 | 按 DOM 顺序排列，位于所有正值元素之后 |
tabindex="≥1" | ✅ 可聚焦 | ✅ 支持 | 数值越小优先级越高，同数值时按 DOM 顺序排列，且所有正值元素优先于 0 和未设置元素 |
二、值为-1、0和 ≥1 核心区别
1. -1 vs 0：聚焦能力的本质差异
-
-1：仅支持编程式聚焦（如点击按钮触发 JS 聚焦到弹窗），适合需主动控制焦点的场景。 -
0：自然融入 Tab 序列，适合需保持默认键盘导航逻辑的元素（如将<div>改造为可聚焦控件）。
2. ≥1 的陷阱与最佳实践
-
优先级问题：值越大越靠后（如
1→2→3），但同值元素按 DOM 顺序排序。 -
慎用场景：过度使用正值会破坏文档流逻辑，导致可访问性下降。推荐优先用
0和 DOM 结构调整，仅在必要时用正值。
三、典型应用场景
| 场景 | 推荐值 | 示例说明 |
|---|---|---|
| 模态框（Modal） | tabindex="-1" | 打开时 JS 聚焦到弹窗，但禁止用户用 Tab 键跳出弹窗。 |
| 自定义交互组件 | tabindex="0" | 使 <div role="button"> 支持键盘操作，融入自然 Tab 序列。 |
| 表单字段跳转优化 | tabindex="1" | 强制指定表单的填写顺序（如地址选择后自动聚焦邮编输入框）。 |
| 动态内容插入 | tabindex="-1" | AJAX 加载的内容需立即聚焦时（如新消息提示），但避免干扰原有 Tab 顺序。 |
四、注意事项
-
可访问性风险：
-
避免滥用正值导致逻辑混乱（如
tabindex="100"跳过中间内容）。 -
非交互元素（如纯文本）无需设置
tabindex。
-
-
浏览器兼容性：
- 全平台主流浏览器均支持，但 Safari 对部分动态聚焦行为存在限制。
-
焦点事件：
tabindex="-1"仍可触发focus/blur事件，适合结合键盘事件（如方向键导航）。
