⚙️ 配置选项
📄 生成代码
常见问题
什么是焦点陷阱？▼
焦点陷阱确保Tab键在模态框内循环，不会跳到背景内容。这是WCAG无障碍标准的要求。
为什么模态框需要焦点陷阱？▼
没有焦点陷阱，Tab键会跳到背景元素，导致键盘用户困惑和误操作。WCAG 2.4.3要求焦点在模态框内循环。
支持哪些框架？▼
生成纯JavaScript代码可在任何框架使用，也提供React Hook版本。
数据会上传到服务器吗？▼
不会。本工具完全在浏览器本地运行，不会上传任何数据。
焦点陷阱生成器能做什么？
焦点陷阱生成器是一款免费在线工具，帮助开发者快速生成模态框焦点管理代码。焦点陷阱确保Tab键在对话框内循环，不会跳到背景内容，是WCAG无障碍标准的必要要求。本工具支持纯JavaScript和React Hook两种代码风格，可配置Esc关闭、焦点恢复等选项。
核心功能
- 双代码风格：纯JavaScript和React Hook版本
- Tab循环：Tab/Shift+Tab在容器内循环
- 焦点管理：打开时聚焦首个元素，关闭时恢复焦点
- Esc关闭：可选Esc键关闭模态框
- 智能过滤：自动忽略不可见和disabled元素
- 即用代码：生成可直接使用的完整代码
应用场景
场景1：模态对话框
为模态框添加焦点陷阱，确保键盘用户只能在对话框内操作，防止Tab键跳到背景。
场景2：抽屉面板
侧边抽屉打开时，焦点应限制在抽屉内，关闭后恢复到触发按钮。
场景3：全屏覆盖
全屏覆盖层（如图片查看器、引导流程）需要焦点陷阱防止用户误操作背景。