tabindex值决定元素可聚焦性及tab顺序：0表示按dom顺序参与导航，-1表示仅可脚本聚焦，正整数强制排序但不推荐；默认可聚焦元素有a、button、input等，div等需手动设tabindex="0"。

tabindex 属性值的含义和取值范围

tabindex 不是“开关”，而是控制元素是否可聚焦、以及在键盘 Tab 导航中位置的数值型属性。它的行为完全由值决定，不是布尔逻辑。

• tabindex="0"：元素可聚焦，且按 DOM 顺序参与 Tab 流（最常用）
• tabindex="-1"：元素不可通过 Tab 进入，但可通过 element.focus() 主动获得焦点（适合模态框初始聚焦或动态聚焦场景）
• tabindex="1" 及正整数：强制插入 Tab 顺序，值越小越靠前；但会破坏 DOM 顺序一致性，易引发可访问性问题，不推荐
• 省略 tabindex 或设为负数（除 -1 外）：多数浏览器视为无效，等同于无 tabindex

哪些元素默认有 tabindex？哪些必须手动加？

并非所有元素天生支持键盘聚焦。原生可聚焦元素（如 <a href></a>、<button></button>、<input>）默认 tabindex="0"；而 <div>、<code><span></span>、<section></section> 等容器类元素默认不可聚焦，需显式设置 tabindex="0" 才能响应键盘操作。

• 若用 <div onclick="handleClick()"> 模拟按钮，必须加 <code>tabindex="0"，否则键盘用户无法触发
• 加了 tabindex="0" 后，还需监听 Enter 和 Space 键（部分浏览器对空格键有默认行为，需 preventDefault）
• 语义化优先：能用 <button></button> 就不用 <div tabindex="0">，避免绕过浏览器默认聚焦/按键逻辑 <h3>设置 tabindex 后仍无法用键盘触发 click 的常见原因</h3> <p>加了 <code>tabindex 只解决“能聚焦”，不等于“能响应交互”。焦点进入后，还需正确绑定事件和处理按键逻辑。
  • 只监听 click 事件不够：键盘用户按 Enter 或 Space 不会触发 click，需额外监听 keydown 并判断 event.key === 'Enter' || event.key === ' '
  • Space 键在 <button></button> 上会自动触发 click，但在 <div tabindex="0"> 上不会 —— 必须手写逻辑 <li>CSS <code>outline: none 会隐藏焦点指示器，导致键盘用户“看不见自己在哪”，应改用 :focus-visible 控制样式
  • 动态渲染的元素（如 React 中条件渲染的 <div>）若未在挂载后调用 <code>element.focus()，即使有 tabindex="-1" 也无法自动获得焦点

    用 JavaScript 动态管理 tabindex 的注意事项

    运行时修改 tabindex 值本身有效，但要注意焦点状态不会自动同步，尤其涉及模态框、下拉菜单等临时 UI。

    • 打开模态框时，应将主内容区 tabindex="-1" 并移除其 focus，再把焦点移到模态框首个可聚焦子元素
    • 关闭模态框后，需恢复主内容区的可聚焦性（比如重置 tabindex 或重新 focus 到触发按钮）
    • 不要用 tabindex="999" 强行“抢”焦点顺序 —— 它会让屏幕阅读器误判结构层级，且与后续新增元素冲突
    • 批量禁用区域可用 inert 属性（现代浏览器支持），比逐个设 tabindex="-1" 更可靠
    实际项目里最容易被忽略的，是 tabindex="0" 和 tabindex="-1" 的语义差异混用，以及忘记补全键盘事件处理逻辑 —— 焦点能进，但按空格没反应，用户就卡住了。