tabindex属性控制焦点顺序：0按文档流参与，-1禁用tab切入但可脚本聚焦，正整数强制排序且优先于0；避免正整数以保障可访问性，优先调整dom顺序。

tabindex 属性决定焦点顺序

浏览器默认按 HTML 文档流顺序处理 Tab 键切换，但你可以用 tabindex 显式控制。它接受三种值：0 表示按文档流参与 tab 序列；-1 表示不能通过 Tab 切入（但可通过脚本聚焦）；正整数（如 1、2）强制指定顺序，数值越小越靠前。

• 正整数 tabindex 会把元素“提权”到所有 tabindex="0" 元素之前，且按数值升序排列
• 多个相同正整数（如都设为 1）时，仍按 DOM 顺序 fallback
• tabindex="-1" 常用于模态框内元素在打开前禁用 tab，打开后用 .focus() 激活
• 避免随意使用正整数：它破坏可访问性语义，屏幕阅读器可能跳过或误读顺序

表单控件默认有 tabindex="0"、、、<button> 等原生可交互控件，即使没写 <code>tabindex</code>，也默认可被 Tab 切入。它们的顺序就是它们在 HTML 中出现的先后位置。 <ul> <li>不要给表单控件额外加 <code>tabindex="0"</code> —— 冗余且可能干扰自动聚焦逻辑 </li> <li>如果某个控件需要跳过（比如临时禁用），应设 <code>disabled</code> 或 <code>tabindex="-1"</code>，而非 <code>tabindex="0"</code> </li> <li> <code>disabled</code> 控件不仅不可聚焦，还会被完全忽略在 tab 序列外；而 <code>tabindex="-1"</code> 的控件仍可通过 JS 聚焦，适合“视觉启用但键盘暂不接入”的场景 </li> </ul> <h3>避免 tabindex > 0 的常见陷阱</h3> <p>正整数 <code>tabindex</code> 看似灵活，实际极易出错：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>页面中任意一个 <code>tabindex="1"</code> 会让所有 <code>tabindex="0"</code> 元素延后，哪怕它们在 DOM 前面 </li> <li>如果多个组件库各自用了 <code>tabindex="1"</code>，焦点顺序就变成“谁最后渲染谁先获得焦点”，不可预测 </li> <li>屏幕阅读器（如 NVDA、VoiceOver）对正整数 tabindex 支持不一致，部分会直接跳过或报“无序”警告 </li> <li>替代方案更可靠：调整 DOM 顺序、用 <code>aria-flowto</code>（需配合 JS）、或在必要时用 <code>focus()</code> 手动接管 </li> </ul> <h3>测试 tab 顺序是否合理</h3> <p>别只靠眼睛看 DOM 结构，真实键盘操作最准：</p> <ul> <li>在 Chrome / Firefox 中，打开页面后按 <code>Tab</code> 键，观察焦点是否按预期移动 </li> <li>注意：某些浏览器（如 Safari）默认禁用非链接/表单元素的 tab 支持，需在「系统偏好设置 → 键盘 → 快捷键 → 全键盘控制」中开启 </li> <li>使用无障碍工具验证：Chrome DevTools → Lighthouse → 运行「Accessibility」审计，查看 “Logical tab order” 是否通过 </li> <li>移动端 Safari 不支持 Tab 键，但外接蓝牙键盘时行为与桌面 Safari 一致，需一并测试 </li> </ul> <p>tabindex 的核心不是“能设多少种值”，而是“要不要打破自然流”。多数表单根本不需要设正整数——调换几个 <code><input></code> 标签的位置，比硬编码 <code>tabindex="3"</code> 更健壮、更易维护。</p></button>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！