JavaScript焦点陷阱如何实现Tab键在指定区域内循环不立即跳转

在前端开发中，当实现模态框、自定义下拉框这类需要用户聚焦操作的组件时，焦点管理是一个重要的环节。如果用户在组件内按Tab键时焦点直接跳到页面的其他元素，会严重影响使用体验，尤其是无障碍场景下无法满足访问要求。下面我们来看看如何用JavaScript实现可靠的焦点陷阱，让Tab键始终在指定区域内循环。

焦点陷阱的核心原理

焦点陷阱的核心目标是拦截Tab键的默认行为，判断当前焦点位置，当焦点到达区域边界时，手动将焦点切换到区域的另一个边界元素，而不是让浏览器默认把焦点移到区域外。要实现这个效果，我们需要先搞清楚两个关键点：哪些元素是可以被聚焦的，以及如何监听键盘的Tab操作。

可聚焦元素的筛选规则

不是所有DOM元素都能接收焦点，我们需要先筛选出指定容器内的所有可聚焦元素，常用的可聚焦元素包括：

• 原生可聚焦元素：<input>、<button>、<select>、<textarea>、<a>带href属性
• 设置了tabindex属性大于等于0的元素
• 例外情况：<input>、<button>等如果设置了disabled属性，或者tabindex为-1，则不可聚焦

避免Tab键立即跳转的实现步骤

实现焦点陷阱的完整流程可以分为以下几步：

1. 获取容器内的所有可聚焦元素

我们可以先写一个工具函数，用来筛选容器内符合要求的元素：

// 筛选容器内可聚焦元素的函数
function getFocusableElements(container) {
  // 可聚焦元素的选择器
  const focusableSelector = [
    'a[href]',
    'button:not([disabled])',
    'input:not([disabled])',
    'select:not([disabled])',
    'textarea:not([disabled])',
    '[tabindex]:not([tabindex="-1"])'
  ].join(',');
  // 获取所有匹配的元素并转为数组
  const elements = Array.from(container.querySelectorAll(focusableSelector));
  // 过滤掉tabindex为负数的元素，以及不可见的元素
  return elements.filter(el => {
    const tabIndex = parseInt(el.getAttribute('tabindex'));
    return (isNaN(tabIndex) || tabIndex >= 0) && el.offsetParent !== null;
  });
}

2. 监听容器的键盘事件

我们需要在容器上监听keydown事件，捕获Tab键的操作，这里要注意事件要设置为捕获阶段，避免被其他事件阻止：

// 焦点陷阱类
class FocusTrap {
  constructor(container) {
    this.container = container;
    this.focusableElements = [];
    this.firstFocusableElement = null;
    this.lastFocusableElement = null;
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  // 激活焦点陷阱
  activate() {
    // 更新可聚焦元素列表
    this.updateFocusableElements();
    // 监听键盘事件，使用捕获阶段
    this.container.addEventListener('keydown', this.handleKeyDown, true);
    // 默认将焦点设置到第一个可聚焦元素
    if (this.firstFocusableElement) {
      this.firstFocusableElement.focus();
    }
  }

  // 更新可聚焦元素列表
  updateFocusableElements() {
    this.focusableElements = getFocusableElements(this.container);
    this.firstFocusableElement = this.focusableElements[0];
    this.lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
  }

  // 处理键盘按下事件
  handleKeyDown(event) {
    // 只处理Tab键
    if (event.key !== 'Tab') return;
    // 如果容器内没有可聚焦元素，直接阻止默认行为
    if (this.focusableElements.length === 0) {
      event.preventDefault();
      return;
    }
    // 判断是向前Tab还是向后Tab
    if (event.shiftKey) {
      // Shift+Tab：向后切换焦点
      if (document.activeElement === this.firstFocusableElement) {
        // 当前焦点是第一个元素，跳转到最后一个
        event.preventDefault();
        this.lastFocusableElement.focus();
      }
    } else {
      // 单独Tab：向前切换焦点
      if (document.activeElement === this.lastFocusableElement) {
        // 当前焦点是最后一个元素，跳转到第一个
        event.preventDefault();
        this.firstFocusableElement.focus();
      }
    }
  }

  // 关闭焦点陷阱
  deactivate() {
    this.container.removeEventListener('keydown', this.handleKeyDown, true);
  }
}

3. 使用示例

假设我们有一个模态框容器，id为modal，使用焦点陷阱的方式如下：

// 获取模态框容器
const modal = document.getElementById('modal');
// 创建焦点陷阱实例
const trap = new FocusTrap(modal);
// 打开模态框时激活陷阱
modal.style.display = 'block';
trap.activate();
// 关闭模态框时关闭陷阱
function closeModal() {
  modal.style.display = 'none';
  trap.deactivate();
}

常见问题说明

很多开发者实现焦点陷阱时出现Tab键立即跳转的问题，通常是因为两个原因：一是没有正确筛选可聚焦元素，漏掉了部分元素导致边界判断错误；二是事件监听没有使用捕获阶段，被其他事件先处理了默认行为，或者没有阻止到达边界时的默认跳转。上面的实现中，我们通过updateFocusableElements动态更新可聚焦元素列表，同时用捕获阶段的事件监听，就能避免这些问题。

另外如果容器内动态添加了可聚焦元素，需要手动调用trap.updateFocusableElements()更新列表，保证焦点循环的准确性。

JavaScript焦点陷阱Tab键循环焦点管理修改时间：2026-05-29 17:29:46