弹窗打开时需用 .focus() 主动聚焦首个可操作元素（如 button/input），该元素须设 tabindex="-1"；仅靠 tabindex 无法自动聚焦或锁定 Tab 范围，必须结合 JS 实现首次聚焦、Tab 键拦截重定向及关闭后焦点回退。
弹窗表单打开时怎么把焦点落到第一个可操作元素上
必须用 .focus() 主动触发，且目标元素得有 tabindex="-1"。浏览器不会因为弹窗 DOM 出现在最前面就自动聚焦它——哪怕你把整个 <div class="modal"> 放在 body 底部，只要没 JS 调用 .focus()，键盘用户第一次按 Tab 还是从页面顶部开始。
常见错误是给弹窗根容器设 tabindex="0"，结果焦点停在空 div 上，用户还得再按一次 Tab 才到按钮；更糟的是，如果这个容器里有标题文字（<h2>）也加了 tabindex="-1"，焦点会卡在不可响应的文本上，完全无法交互。
- 首个可操作元素通常是
<button>、<input>或带role="button"的自定义控件 - 原生控件（如
<button>）默认可聚焦，但加tabindex="-1"是保险做法，尤其在 SSR hydration 后或移动端 Safari 中 - 如果是自定义触发项（如
<div role="button">），必须同时满足：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() 到另一端。
- 获取所有有效可聚焦项：用
modalEl.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') - 不要用
tabindex="0"给所有内部元素“统一开通”，这会引入多余停靠点，降低导航效率 - 背景遮罩层（
<div class="modal-backdrop">）若没设tabindex="-1"，又没禁用pointer-events，有时会被 Tab 到（尤其 DOM 位置靠前时）
关闭弹窗后焦点必须回退到触发源，而不是消失
焦点不能留在弹窗里，也不能跳到 <body> 或页面顶部——否则键盘用户会彻底迷失上下文。这和 tabindex 值无关，全靠你在打开时记录触发元素并关闭时复用 .focus()。
- 触发按钮是静态
<button>？直接保存引用：const trigger = event.target; modal.open(); ... modal.close(() => trigger.focus()); - 触发源是动态渲染的（如列表中某个“编辑”按钮）？点击时传
data-id，关闭后用document.querySelector(`[data-id="${id}"]`)查找并聚焦 - 触发元素已被销毁（如行被删除）？焦点应回退到最近逻辑父容器（如表格
<table>），而不是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强行插队
tabindex="-1" 只是让元素“能被聚焦”，而真正的锁定逻辑必须由 JS 实现——包括首次聚焦、Tab 循环拦截、焦点回退三步缺一不可。任何一步缺失，键盘用户的体验就会断层。 
