tabindex仅控制元素是否可聚焦及在tab序列中的相对位置，真正决定焦点流的是dom顺序与tabindex值的组合；有效值仅有0（按dom顺序插入）、正整数（强制前置，易破坏可访问性）和-1（不可tab聚焦但可js聚焦）。
tabindex 不是用来“管理焦点序列”的万能开关，它只是告诉浏览器“这个元素能不能被聚焦”以及“在 Tab 顺序里排第几”。真正决定焦点流的，是 DOM 顺序 + tabindex 值的组合逻辑，而且负值和非数字值会直接破坏预期行为。
哪些 tabindex 值真正有效
只有三种取值有明确语义：
-
tabindex="0"：元素可被 Tab 切入，顺序按 DOM 位置自然插入（最常用、最安全） -
tabindex="1"、tabindex="2"等正整数：强制前置到 Tab 序列开头，数值越小越靠前；但多个正数会打乱 DOM 顺序，极易引发可访问性问题 -
tabindex="-1"：不能通过 Tab 进入，但可通过 JavaScript 主动调用focus()聚焦（比如模态框打开后手动聚焦首个输入框） - 其他值（如
tabindex="a"、tabindex=""、tabindex="0.5"）会被忽略或转为0，行为不可控
tabindex 和 input 标签的常见误用
很多人以为给 <input> 加 tabindex 就能“跳过”某些字段，结果反而让焦点乱跳。实际要注意：
- 默认可聚焦的表单元素（
input、button、select、textarea）天然有tabindex="0"，不写也生效 - 加
tabindex="0"到已有可聚焦元素上，等同于没加，但可能误导维护者 - 给禁用的
input（disabled）设tabindex没用——它根本不会出现在 Tab 流中 - 用
tabindex="999"把某个input“塞到最后”，一旦后续新增元素也用了高数值，顺序就崩了
真正可控的焦点流设计策略
别靠 tabindex 数字硬排，用结构和逻辑控制更可靠：
- 保持 DOM 顺序与视觉/操作逻辑一致：表单字段从上到下写，Tab 流自然顺滑
- 需要跳过某字段？用
tabindex="-1"+focus()在 JS 中接管（例如跳过只读字段后直接聚焦下一个可编辑项） - 模态框内焦点必须限制在内部：用
tabindex="-1"给容器，监听keydown捕获 Tab 键，手动循环聚焦第一个/最后一个可聚焦子元素 - 避免所有正数
tabindex：WCAG 明确建议除非极特殊场景（如富文本编辑器工具栏），否则禁用正数值
最常被忽略的一点：屏幕阅读器用户依赖的是语义结构（label、aria-labelledby、DOM 顺序），不是 tabindex 数字。强行用正数打乱顺序，对键盘用户和辅助技术都是双重打击。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
