tabindex="-1"元素能通过javascript主动聚焦但不可用tab键到达，是控制焦点流转的关键；原生可交互控件无需设tabindex，伪控件才需tabindex="-1"配合js接管。
Tabindex 值为 -1 时到底能聚焦吗？
能，但只能通过 JavaScript 主动调用 .focus()，不能靠 Tab 键流转过去。这是重构焦点逻辑的关键支点——你得先让元素“可编程聚焦”，又不破坏默认 Tab 顺序。
常见错误是给按钮或自定义控件设 tabindex="0" 后发现焦点乱跳，其实真正需要的是：可交互控件（如 <button></button>、<input>）默认已有 tabindex=0，不该重复加；而像 <div role="button"> 这类伪控件，才该用 <code>tabindex="-1" 配合 onclick 和 onkeydown 手动接管焦点。
- 语义化原生控件（
<button></button>、<select></select>）别加tabindex，浏览器已处理好 -
tabindex="-1"仅用于临时聚焦（如模态框打开后element.focus()）、或配合 JS 实现键盘导航的容器 - 设
tabindex="0"会把元素硬塞进 Tab 流，容易打断表单逻辑，慎用
用 tabindex="0" 强制插入焦点节点是否安全？
不安全，尤其在动态表单中。比如在地址字段组后插入一个 tabindex="0" 的帮助按钮，用户按 Tab 会跳进按钮，再按一次却可能跳到下一个 <input>，中间漏掉城市/邮编等必填项——因为浏览器按 DOM 顺序遍历所有 tabindex="0" 元素，不区分语义层级。
更可靠的做法是用 tabindex="-1" + 显式 focus() 控制流转时机，例如：
document.getElementById('city').addEventListener('keydown', (e) => {
if (e.key === 'Tab' && !e.shiftKey) {
e.preventDefault();
document.getElementById('help-btn').focus(); // 跳到帮助按钮
}
});
- 避免多个
tabindex="0"在同一逻辑区块内共存 - 若必须插入新焦点点（如“跳过此步”链接），优先用
tabindex="-1"并在合适时机（如上一字段失焦后）用 JS 聚焦 - 注意屏幕阅读器兼容性：
tabindex="-1"元素不会被朗读，需补aria-live或aria-label
复杂表单中如何用 tabindex 配合 aria-activedescendant 实现列表级键盘导航？
当表单里有下拉建议列表、多选标签组这类“一个容器 + 多个可选项”的结构时，不要给每个选项设 tabindex="0"，否则 Tab 键会逐个卡住。正确做法是容器设 tabindex="0"，选项设 tabindex="-1"，再用 aria-activedescendant 指向当前高亮项 ID。
这样 Tab 只进容器一次，方向键控制内部选项，Enter 确认——既符合 WCAG，又避免焦点污染主表单流。
- 容器（如
<div role="combobox">）设 <code>tabindex="0"和aria-haspopup="listbox" - 每个选项（
<div role="option">）设 <code>tabindex="-1"和唯一id - JS 中更新容器的
aria-activedescendant值，例如container.setAttribute('aria-activedescendant', 'option-2') - 务必监听
ArrowDown/ArrowUp，并阻止默认行为，否则浏览器会尝试滚动 - 移动端确保带
tabindex的元素至少有role（如role="button"）或onclick监听器 - IE11 中聚焦前加
setTimeout(() => el.focus(), 0)，绕过渲染队列问题 - 避免依赖
tabindex做关键流程（如必填校验跳转），降级方案应基于form.checkValidity()+scrollIntoView()
移动端 Safari 和旧版 IE 对 tabindex 的兼容陷阱
iOS Safari 默认禁用非可交互元素的 tabindex（哪怕设了 0），除非元素有 role 属性或绑定事件监听器；IE11 则对 tabindex="-1" 的 .focus() 支持不稳定，常需加 setTimeout 延迟执行。
这意味着你在桌面调试没问题的焦点逻辑，到真机上可能完全失效。
最易被忽略的是：动态插入的 DOM 节点即使带 tabindex，也不会自动加入 Tab 流，必须手动触发一次 el.focus() 或重新计算焦点索引。
