动态修改tabindex后焦点不更新是正常行为，浏览器仅在按tab键时重排焦点链；需显式调用.focus()使新tabindex生效，但须满足元素可见、曾被用户手势触发（ios safari）、父级无裁剪等前提。
tabindex动态修改后焦点不更新是正常行为
浏览器不会因为tabindex属性值变了就自动重排焦点链或跳转焦点——它只在用户按Tab键时重新扫描所有可聚焦元素。所以你用element.setAttribute('tabindex', '0')或element.tabIndex = 0改完，当前焦点还停在原来的地方，这是预期行为，不是 bug。
想让新tabindex生效，必须显式调用.focus()
只有主动触发.focus()，才能把键盘焦点真正落到目标元素上。但要注意几个关键前提：
-
tabindex="-1"的元素可以被.focus()成功聚焦（现代浏览器均支持），无需改成0再调用 -
display: none或visibility: hidden的元素即使tabindex="-1"，.focus()也会静默失败 - 移动端 Safari 要求该元素曾被用户手势触发过（比如点过一次），否则首次
.focus()会被忽略 - 如果元素父级有
overflow: hidden且焦点元素被裁剪，.focus()仍成功，但滚动不会自动触发——需额外加{preventScroll: false}参数
常见误操作：改了tabindex却没处理焦点归属
比如模态框打开后给关闭按钮设tabindex="-1"，但没紧接着调closeBtn.focus()，结果键盘用户仍卡在背景内容里。又比如表格行<tr tabindex="0">动态插入后，只改了<code>tabindex，没对第一行做firstTr.focus()，导致 Tab 键第一次按下去直接跳过整行。
更隐蔽的问题是：多个元素同时设tabindex="-1"，但只聚焦其中一个，其余仍“空占”着可编程聚焦能力，容易和后续逻辑冲突（比如重复聚焦、事件监听错位）。
复杂点在于动态渲染框架里的时机问题
React/Vue 中用v-if或conditional rendering控制元素存在性时，tabindex设置必须发生在 DOM 节点真实挂载之后。否则document.getElementById()取不到节点，.focus()自然无效。建议：
- 在
useEffect（React）或mounted（Vue）钩子中操作 - 用
requestAnimationFrame包裹.focus()，确保样式已计算完毕 - 避免在
setState后立刻调.focus()，中间至少加一层微任务（如Promise.resolve().then(() => el.focus())）
真正难的不是怎么改tabindex，而是判断“现在该由谁获得焦点”——这需要结合语义流、用户操作路径和 DOM 当前状态做决策，而不是机械地塞一个.focus()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
