tabindex有效值仅三种：0（按DOM顺序加入焦点流）、-1（不可Tab聚焦但可JS聚焦）、正整数（强制插队，不推荐）；默认可聚焦元素无需设置；非交互元素用0即可；禁用元素自动脱离焦点流；跳过元素应设tabindex="-1"；移动端需同时满足role属性和事件监听才生效。
tabindex 属性值怎么设才有效
tabindex 不是设了就能进 Tab 焦点流，只有三种取值行为明确：tabindex="0" 表示按 DOM 顺序加入焦点流；tabindex="-1" 表示不能通过 Tab 进入，但可通过 .focus() 主动聚焦；tabindex="正整数"（如 1、5）会强制插队，数值越小越靠前——但强烈不建议用正整数，它会打乱语义顺序，导致屏幕阅读器混乱、可访问性下降。
常见错误：给按钮加 tabindex="1" 想让它第一个被聚焦，结果整个页面焦点顺序错乱，用户按一次 Tab 就跳到页脚，再按又回到顶部。
- 默认可聚焦元素（
button、a[href]、input等）天然有tabindex="0"效果，无需手动加 - 想让非交互元素（如
div、span）参与焦点流，只加tabindex="0"就够了 - 禁用状态的
input[disabled]或button:disabled自动脱离焦点流，不用额外设tabindex="-1"
Tab 键跳过某个元素的正确写法
想让某个元素“看不见” Tab 流，不是删掉 tabindex，而是显式设为 -1。比如一个仅作视觉提示的 div，本不该被键盘操作，但又被 JS 用来触发弹窗：
<div tabindex="-1" id="tooltip">提示内容</div>
这样它不会出现在 Tab 链中，但 JS 仍可调用 document.getElementById('tooltip').focus() 主动聚焦（例如配合 aria-live 做键盘友好提示）。
- 不要用
tabindex="-999"或其他负数——-1是唯一标准值，其余负数行为未定义，部分浏览器可能忽略 - 避免对
display: none或visibility: hidden元素设tabindex，它们本就不在渲染树中，设了也无效 - 如果元素是条件渲染（如 Vue/React 中 v-if 或 &&），确保 DOM 节点存在后再设
tabindex，否则 JS 获取不到节点
动态修改 tabindex 后焦点没更新？
DOM 更新后 tabindex 改了，但当前焦点没自动跳转，这是正常现象。浏览器只在用户按 Tab 时重新计算焦点流，不会因为属性变更就重排。需要手动干预：
- 若逻辑上该元素现在“应该”获得焦点（比如模态框打开），调用
.focus()显式聚焦 - 若要跳过一批元素（如关闭弹窗后恢复主内容焦点），记录之前聚焦的元素（用
document.activeElement），关闭后再调回 - 注意
focus()在 Firefox 中对tabindex="-1"元素有效，但 Chrome 早期版本要求至少tabindex="0"才能聚焦，现在已统一支持-1
移动端 Safari 的 tabindex 陷阱
iOS Safari 默认禁用非表单/链接元素的键盘焦点（即使设了 tabindex="0"），这是为了防止意外唤起软键盘。真正生效需两个条件同时满足：
- 元素必须有
role属性，如role="button"、role="link" - 必须监听
click或keydown事件（哪怕空函数）
例如：
<div tabindex="0" role="button" onclick="void(0)">可聚焦卡片</div>
漏掉任一条件，iOS 上 Tab 键或外接键盘都无法聚焦该元素。Android Chrome 相对宽松，但为了一致性，建议统一加上。
最常被忽略的是：以为加了 tabindex 就万事大吉，结果在真机测试时发现焦点根本进不去——问题往往出在 role 和事件监听的组合缺失上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
