HTML怎么做焦点陷阱_html focus trap焦点陷阱实现【总结】-html教程-PHP中文网

焦点陷阱是通过javascript主动控制焦点在模态框内循环，防止逃逸到背景页面。需监听focusin事件、预收集可聚焦元素、处理tab/shift+tab折返、管理初始/关闭焦点，并兼容屏幕阅读器与移动端。

html怎么做焦点陷阱_html focus trap焦点陷阱实现【总结】

什么是焦点陷阱，为什么不能只靠 `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 是否还在陷阱区域内。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

把所有可聚焦子元素（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" 属性
禁用背景滚动：给加 style="overflow: hidden"，但别用 position: fixed 做 hack，会导致 iOS 页面跳动
避免用 outline: none 彻底移除焦点样式——改用 :focus-visible 精准控制，否则键盘用户将失去视觉反馈

真正的难点不在 trap 本身，而在如何让焦点「看起来自然」：既要拦住，又不能让用户察觉你在拦。比如快速连按两次 Tab 后焦点没跟上、或者鼠标点击后焦点位置错乱——这些细节才是实际项目里最耗时间的地方。