使用原生JavaScript模拟Tab键按下操作，支持Shadow DOM

需求 #

用原生JavaScript实现模拟Tab键按下的效果，将焦点切换到Tab顺序中的下一个元素：

• 支持所有可聚焦元素：原生可聚焦元素（如input、button）、设置tabindex="0"的元素
• 兼容包含带Shadow DOM的自定义Web Components的场景
• 现有方案多基于jQuery，缺少原生JS的标准实现

解决方案 #

方法1：遍历可聚焦元素（推荐，完全支持Shadow DOM） #

该方法会按照浏览器Tab顺序收集所有可聚焦元素，包括Shadow DOM内部的元素，然后精准切换焦点。

1. 获取所有可聚焦元素的工具函数

function getAllFocusableElements(root = document) {
  // 定义可聚焦元素的选择器
  const focusableSelectors = [
    'button:not([disabled])',
    'a[href]:not([disabled])',
    'input:not([disabled]):not([type="hidden"])',
    'select:not([disabled])',
    'textarea:not([disabled])',
    '[tabindex="0"]:not([disabled])',
    '[contenteditable="true"]:not([disabled])'
  ];
  
  let elements = Array.from(root.querySelectorAll(focusableSelectors));
  
  // 递归遍历Shadow DOM节点，收集内部可聚焦元素
  root.querySelectorAll('*').forEach(element => {
    if (element.shadowRoot) {
      elements = elements.concat(getAllFocusableElements(element.shadowRoot));
    }
  });
  
  // 过滤掉不可见元素（不可见元素无法被聚焦）
  return elements.filter(el => {
    const style = window.getComputedStyle(el);
    return style.visibility !== 'hidden' && style.display !== 'none' && el.offsetParent !== null;
  });
}

2. 模拟Tab切换的核心函数

function simulateTab() {
  const allFocusable = getAllFocusableElements();
  const currentFocused = document.activeElement;

  if (!currentFocused) {
    // 当前无焦点时，聚焦第一个可聚焦元素
    allFocusable[0]?.focus();
    return;
  }

  const currentIndex = allFocusable.indexOf(currentFocused);
  // 循环切换：最后一个元素之后回到第一个
  const nextIndex = (currentIndex + 1) % allFocusable.length;

  allFocusable[nextIndex]?.focus();
}

方法2：触发原生键盘事件（不推荐，局限性大） #

尝试模拟真实的Tab键按下事件，但由于浏览器的安全限制，多数场景下无法生效，尤其是Web Components内部：

function simulateTabEvent() {
  const tabEvent = new KeyboardEvent('keydown', {
    key: 'Tab',
    code: 'Tab',
    keyCode: 9,
    which: 9,
    bubbles: true,
    cancelable: true
  });

  document.activeElement?.dispatchEvent(tabEvent);
}

注意：合成的键盘事件无法完全模拟真实用户操作，浏览器可能会阻止其触发焦点切换，因此仅作参考。

内容的提问来源于stack exchange，提问作者Muhammad Rehan Saeed