弹窗打开时需用 .focus() 主动聚焦首个可操作元素（如 button/input），该元素须设 tabindex="-1"；仅靠 tabindex 无法自动聚焦或锁定 tab 范围，必须结合 js 实现首次聚焦、tab 键拦截重定向及关闭后焦点回退。

弹窗表单打开时怎么把焦点落到第一个可操作元素上

必须用 .focus() 主动触发，且目标元素得有 tabindex="-1"。浏览器不会因为弹窗 DOM 出现在最前面就自动聚焦它——哪怕你把整个 <div class="modal"> 放在 body 底部，只要没 JS 调用 <code>.focus()，键盘用户第一次按 Tab 还是从页面顶部开始。

常见错误是给弹窗根容器设 tabindex="0"，结果焦点停在空 div 上，用户还得再按一次 Tab 才到按钮；更糟的是，如果这个容器里有标题文字（<h2></h2>）也加了 tabindex="-1"，焦点会卡在不可响应的文本上，完全无法交互。

• 首个可操作元素通常是 <button></button>、<input> 或带 role="button" 的自定义控件
• 原生控件（如 <button></button>）默认可聚焦，但加 tabindex="-1" 是保险做法，尤其在 SSR hydration 后或移动端 Safari 中
• 如果是自定义触发项（如 <div role="button">），必须同时满足：<code>tabindex="-1" + role="button" + keydown 监听（响应 Enter/Space）
• 移动端 Safari 在未触发用户手势前，.focus() 对非原生元素可能静默失败，建议在 click 事件回调中立即调用，或用 setTimeout(() => el.focus(), 0)

为什么不能靠 tabindex="-1" 自动锁住 Tab 键范围

tabindex="-1" 只影响单个元素能否被 Tab 键到达，它不是“开关”，也不具备容器级约束力。给弹窗根元素设 tabindex="-1" 不会阻止 Tab 键跳出，反而可能让焦点先落到这个空容器上，再按一次 Tab 才进内部按钮——这等于多加了一步无效停靠点。

真正起作用的是 JS 拦截 + 主动重定向：监听 keydown 捕获 Tab，判断焦点是否将移出弹窗边界，若是则 e.preventDefault() 并手动 .focus() 到另一端。


Reword
一款面向出版和内容团队的AI文章写作与编辑工具，可辅助研究主题、规划文章结构并完善原创内容。
下载
• 获取所有有效可聚焦项：用 modalEl.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
• 不要用 tabindex="0" 给所有内部元素“统一开通”，这会引入多余停靠点，降低导航效率
• 背景遮罩层（<div class="modal-backdrop">）若没设 <code>tabindex="-1"，又没禁用 pointer-events，有时会被 Tab 到（尤其 DOM 位置靠前时）

  关闭弹窗后焦点必须回退到触发源，而不是消失

  焦点不能留在弹窗里，也不能跳到 或页面顶部——否则键盘用户会彻底迷失上下文。这和 tabindex 值无关，全靠你在打开时记录触发元素并关闭时复用 .focus()。

  • 触发按钮是静态 <button></button>？直接保存引用：const trigger = event.target; modal.open(); ... modal.close(() => trigger.focus());
  • 触发源是动态渲染的（如列表中某个“编辑”按钮）？点击时传 data-id，关闭后用 document.querySelector(`[data-id="${id}"]`) 查找并聚焦
  • 触发元素已被销毁（如行被删除）？焦点应回退到最近逻辑父容器（如表格 <table>），而不是 <code>document.body
  • 别依赖 blur 事件——它不可靠，可能被多次触发，且不保证发生在关闭动作之后

  复杂表单里混入帮助按钮时怎么避免 Tab 流中断

  比如城市输入框后面有个“？”帮助按钮，如果设 tabindex="0"，用户按 Tab 会从城市字段直接跳进按钮，再按一次却可能跳到邮编字段，中间漏掉省份、区县等必填项——因为浏览器只按 DOM 顺序遍历所有 tabindex="0" 元素，不管语义层级。

  正确做法是把帮助按钮设为 tabindex="-1"，并在城市字段的 keydown 或 blur 中显式控制流转时机：

  document.getElementById('city').addEventListener('keydown', (e) => {
    if (e.key === 'Tab' && !e.shiftKey) {
      e.preventDefault();
      document.getElementById('help-btn').focus();
    }
  });

  • 这种控制方式确保焦点流转符合业务逻辑，而非被 DOM 顺序绑架
  • 注意：设 tabindex="-1" 的元素不会被屏幕阅读器朗读，需补 aria-label 或 aria-live 提供上下文
  • 若帮助按钮需参与主 Tab 流，优先把它放在 DOM 中逻辑位置该在的地方（比如紧邻城市字段之后），而非靠 tabindex 强行插队
  焦点锁定最易被忽略的点是：它从来不是单靠 HTML 属性就能完成的事。tabindex="-1" 只是让元素“能被聚焦”，而真正的锁定逻辑必须由 JS 实现——包括首次聚焦、Tab 循环拦截、焦点回退三步缺一不可。任何一步缺失，键盘用户的体验就会断层。