当前位置：首页 > JavaScript

js实现tab键的效果

2026-01-31 06:10:19JavaScript

实现Tab键切换焦点

在JavaScript中，可以通过监听键盘事件模拟Tab键的焦点切换效果。以下代码示例展示如何通过按Enter键触发类似Tab键的焦点跳转：

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
    const focusableElements = document.querySelectorAll('input, button, select, textarea, [href], [tabindex]:not([tabindex="-1"])');
    const activeElement = document.activeElement;
    let currentIndex = Array.from(focusableElements).indexOf(activeElement);

    if (currentIndex !== -1) {
      const nextIndex = (currentIndex + 1) % focusableElements.length;
      focusableElements[nextIndex].focus();
    }
  }
});

自定义Tab顺序

通过设置元素的tabindex属性可以自定义焦点顺序。以下示例展示如何为元素设置自定义Tab顺序：

<input type="text" tabindex="1">
<button tabindex="3">按钮</button>
<select tabindex="2"></select>

禁用Tab焦点

对于不希望获得焦点的元素，可以设置tabindex为-1：

<div tabindex="-1">这个元素不会获得焦点</div>

可访问性考虑

实现Tab键效果时需注意：

确保所有可交互元素都能通过键盘访问
焦点顺序应符合逻辑流程
焦点状态应有明显视觉反馈
避免创建键盘陷阱（无法退出的焦点循环）

完整组件示例

以下是一个完整的可Tab切换的组件实现：

class TabFocusManager {
  constructor(container) {
    this.container = container;
    this.focusableElements = this.getFocusableElements();
    this.setupEventListeners();
  }

  getFocusableElements() {
    return this.container.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
  }

  setupEventListeners() {
    this.container.addEventListener('keydown', (e) => {
      if (e.key === 'Tab') {
        this.handleTabKey(e);
      }
    });
  }

  handleTabKey(e) {
    const elements = this.focusableElements;
    const firstElement = elements[0];
    const lastElement = elements[elements.length - 1];

    if (e.shiftKey && document.activeElement === firstElement) {
      lastElement.focus();
      e.preventDefault();
    } else if (!e.shiftKey && document.activeElement === lastElement) {
      firstElement.focus();
      e.preventDefault();
    }
  }
}

// 使用示例
const form = document.querySelector('form');
new TabFocusManager(form);