焦点陷阱是通过JavaScript主动控制焦点在模态框内循环，防止逃逸到背景页面。需监听focusin事件、预收集可聚焦元素、处理Tab/Shift+Tab折返、管理初始/关闭焦点，并兼容屏幕阅读器与移动端。
什么是焦点陷阱，为什么不能只靠 tabindex
焦点陷阱（Focus Trap）不是简单地给元素加 tabindex="0" 或监听 Tab 键就能实现的。它要求：当用户按 Tab（或 Shift+Tab）到达模态框/弹窗边界时，焦点必须「折返」到另一端，且不能逃逸到背景页面。纯 CSS 或单个属性无法完成——必须用 JavaScript 主动控制 focus() 行为。
常见错误是只拦截 Tab 却忽略 Shift+Tab，或没处理初始焦点、键盘焦点与鼠标焦点混用导致逻辑断裂。
用 focusin + event.target 捕获焦点进出
不要依赖 keydown 判断 Tab——它无法感知焦点是否已移出容器，且在 Safari 中对 Shift+Tab 的 keyCode 兼容性差。应监听容器的 focusin 事件，实时检查 event.target 是否还在陷阱区域内。
- 把所有可聚焦子元素（
button、input、[tabindex]）预先收集进一个数组：const focusables = Array.from(container.querySelectorAll('button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) - 记录第一个和最后一个可聚焦元素：
const first = focusables[0]，const last = focusables[focusables.length - 1] - 在
focusin回调中判断：if (event.target === last && !event.shiftKey) { first.focus(); event.preventDefault(); }，反之亦然
必须手动管理初始焦点和 Escape 关闭逻辑
焦点陷阱生效的前提是：模态框打开后，焦点必须立刻落在第一个可聚焦元素上；关闭时，焦点需返回触发按钮。这两步漏掉，整个陷阱就形同虚设。
立即学习“前端免费学习笔记（深入）”；
- 打开模态框后立即执行：
first?.focus()（注意空值检查，避免focus()报错） - 绑定
keydown监听器到容器，仅响应Escape：if (event.key === 'Escape') { modal.close(); triggerButton.focus(); } - 关闭模态框时，记得移除所有事件监听器，否则可能造成内存泄漏或跨模态干扰
移动端和屏幕阅读器的兼容要点
iOS Safari 和 VoiceOver 对 focus() 的行为更保守：如果目标元素不可见、被 display: none 或 visibility: hidden 遮挡，focus() 会静默失败。同时，部分屏幕阅读器（如 NVDA）依赖 aria-modal="true" 和 role="dialog" 才能正确限制焦点范围。
- 确保模态框有
role="dialog"和aria-modal="true"属性 - 禁用背景滚动：给
<body>加style="overflow: hidden"，但别用position: fixed做 hack，会导致 iOS 页面跳动 - 避免用
outline: none彻底移除焦点样式——改用:focus-visible精准控制，否则键盘用户将失去视觉反馈
真正的难点不在 trap 本身，而在如何让焦点「看起来自然」：既要拦住，又不能让用户察觉你在拦。比如快速连按两次 Tab 后焦点没跟上、或者鼠标点击后焦点位置错乱——这些细节才是实际项目里最耗时间的地方。
