在Web交互开发中，焦点陷阱是处理模态组件焦点管理的核心技术，核心目标是限制Tab键的焦点切换范围，让用户在组件内操作时不会跳转到外部元素。实现过程中需要精准控制焦点跳回的时机，同时理清相关事件的执行顺序，避免出现焦点错乱的问题。
焦点陷阱的核心原理
焦点陷阱的实现依赖键盘事件拦截和焦点元素查询两个核心步骤。当用户按下Tab键时，我们需要先阻止默认的焦点跳转行为，再根据当前焦点位置和按键方向，手动计算下一个应该聚焦的元素，最后将焦点设置到目标元素上。
首先需要明确两个关键概念：
- 可聚焦元素：默认支持焦点切换的元素，包括<input>、<button>、<a>等，以及设置了tabindex属性的元素
- 焦点容器：需要限制焦点范围的DOM容器，通常是模态弹窗、抽屉面板的根节点
Tab键事件时序解析
当用户按下Tab键时，事件的执行顺序如下：
- 触发keydown事件，此时事件对象的key属性值为Tab
- 默认行为执行：浏览器自动将焦点切换到下一个可聚焦元素
- 触发keyup事件
要实现焦点控制，我们需要在keydown阶段拦截事件，阻止默认行为后再手动处理焦点跳转，这样才能精确控制焦点的落点。
精确控制焦点循环跳回的实现
实现循环跳回的核心逻辑是：先获取容器内所有可聚焦元素，排序后判断当前焦点位置，如果是最后一个元素按Tab键就跳回第一个，如果是第一个元素按Shift+Tab就跳回最后一个。
以下是完整的实现示例：
// 获取容器内所有可聚焦元素
function getFocusableElements(container) {
// 可聚焦元素选择器，包含默认可聚焦元素和设置了tabindex的元素
const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
const elements = Array.from(container.querySelectorAll(focusableSelector));
// 过滤掉tabindex为负数的元素，这类元素无法通过Tab键聚焦
return elements.filter(el => {
const tabindex = el.getAttribute('tabindex');
return !tabindex || parseInt(tabindex) >= 0;
});
}
// 设置焦点陷阱
function setupFocusTrap(container) {
const focusableElements = getFocusableElements(container);
if (focusableElements.length === 0) return;
// 记录第一个和最后一个可聚焦元素
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
// 初始时将焦点设置到第一个可聚焦元素
firstElement.focus();
// 监听容器的键盘事件，使用捕获阶段确保优先处理
const handleKeyDown = (e) => {
if (e.key !== 'Tab') return;
// 阻止默认的Tab键焦点跳转行为
e.preventDefault();
// 判断按的是Tab还是Shift+Tab
if (e.shiftKey) {
// Shift+Tab：向前切换焦点
if (document.activeElement === firstElement) {
// 当前是第一个元素，跳回最后一个
lastElement.focus();
} else {
// 否则切换到前一个可聚焦元素
const currentIndex = focusableElements.indexOf(document.activeElement);
focusableElements[currentIndex - 1].focus();
}
} else {
// Tab：向后切换焦点
if (document.activeElement === lastElement) {
// 当前是最后一个元素，跳回第一个
firstElement.focus();
} else {
// 否则切换到后一个可聚焦元素
const currentIndex = focusableElements.indexOf(document.activeElement);
focusableElements[currentIndex + 1].focus();
}
}
};
container.addEventListener('keydown', handleKeyDown, true);
// 返回清理函数，移除事件监听
return () => {
container.removeEventListener('keydown', handleKeyDown, true);
};
}
// 使用示例：给id为modal的容器设置焦点陷阱
const modal = document.getElementById('modal');
const removeTrap = setupFocusTrap(modal);
// 组件关闭时调用清理函数
// removeTrap();常见问题与注意事项
1. 事件监听阶段：必须使用捕获阶段（第三个参数设为true）监听keydown事件，否则可能被其他事件处理逻辑拦截，导致控制失效。
2. 动态元素处理：如果容器内存在动态添加的可聚焦元素，需要在元素更新后重新调用getFocusableElements获取最新的元素列表，避免循环逻辑出错。
3. 禁用元素过滤：需要排除disabled状态的元素和tabindex为-1的元素，这类元素无法通过Tab键聚焦，不能纳入循环范围。
4. 初始焦点设置：进入焦点陷阱时，建议将焦点设置到容器内第一个可聚焦元素，或者用户上次操作的元素，提升交互体验。
总结
实现JavaScript焦点陷阱的Tab键循环跳回，核心是理清事件时序，在keydown阶段拦截Tab键默认行为，再通过查询容器内可聚焦元素列表，手动控制焦点的跳转逻辑。只要严格过滤可聚焦元素，处理好边界情况，就能实现稳定可靠的焦点陷阱，满足无障碍交互的要求。
JavaScript焦点陷阱Tab键循环事件时序焦点管理修改时间：2026-06-06 05:04:37