将焦点限制在模态框内
防止 Tab 键跳到后面的页面。
将焦点限制在模态框内 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
为什么焦点必须留在内部
模态框打开期间，键盘 focus 应始终留在其中。如果 Tab 跳到后面的页面，盲人用户就会迷失在他们看不见的内容中。
原生元素会提供帮助
使用 showModal() 打开的真正 dialog 会自动为您限制焦点，这是应优先使用它而不是 div 的重要原因之一。
自行构建模态框时
如果您使用 div 自定义模态框，就必须自行限制焦点，因为没有任何机制会阻止 Tab 跳到页面其他位置。
打开时将焦点移入
首先，在模态框打开时将焦点移入其中，通常移到第一个控件或标题上，让用户从正确的位置开始操作。
modal.querySelector('button').focus();查找可聚焦元素
收集模态框中的可聚焦项目：链接、按钮、输入框，以及任何带有 tabindex 的元素。您需要找到第一个和最后一个元素来建立循环。
modal.querySelectorAll('a, button, input, [tabindex]');从最后一个循环到第一个
当用户在最后一个元素上按下 Tab 时，将焦点移回第一个元素。这样就能让用户循环浏览，而不会跳出模态框。
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}从第一个循环到最后一个
还要处理用户在第一个元素上按下 Shift+Tab 的情况：将焦点移到最后一个元素，使反向切换也保持在模态框内。
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}阻止 Tab 的默认行为
在边界位置必须调用 preventDefault()，否则浏览器会先将焦点移出，您的代码就来不及将其重定向。
e.preventDefault();注意已禁用和隐藏的项目
选择第一个和最后一个元素时，请跳过已禁用或隐藏的元素，因为它们实际上无法获得焦点。
不要忘记背景
限制焦点还需要将后面的页面设为不可交互，这样即使误点击或使用屏幕阅读器，也无法在模态框打开时访问它。
使用键盘进行测试
使用 Tab 遍历整个模态框，观察焦点环循环移动且始终不会离开。这个往返过程就是焦点限制有效的证明。✅
快速检查
您使用 div 构建了自定义模态框。必须怎样做才能让 Tab 始终留在其中？
回顾：让焦点保持在内部
您已经学会在打开时将焦点移入，并在两端循环焦点，因此键盘用户可以一直留在模态框内，直到他们选择将其关闭。🎯
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「将焦点限制在模态框内」课时是免费的吗？
是的 — 「将焦点限制在模态框内」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「将焦点限制在模态框内」这节课中我会学到什么？
防止 Tab 键跳到后面的页面。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「将焦点限制在模态框内」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。