JavaScript手动触发input元素tab按键事件无法跳转焦点问题咨询

• 合成事件无法触发原生默认行为：通过dispatchEvent生成的自定义键盘事件属于非用户真实交互产生的事件，isTrusted属性为false，浏览器出于安全限制，不会执行这类事件对应的原生默认操作，因此Tab键切换焦点的行为不会被触发。
• 事件类型使用错误：keypress事件仅针对可打印字符触发，Tab属于控制类按键，本身就不会触发keypress事件，即使要派发也应该使用keydown类型。
• 阻塞逻辑干扰：代码中的alert属于阻塞式弹窗，关闭弹窗时会改变当前页面的焦点状态，进一步干扰后续逻辑执行。

通过派发合成事件模拟Tab跳转的方案本身不可行，推荐使用以下两种实现方式：

方案1：直接切换焦点（适配当前简单场景） #

如果仅需要在点击按钮后跳转到第二个输入框，直接调用对应元素的focus方法即可：

document.getElementById('btn').addEventListener('click', function() {
  document.getElementsByTagName('input')[1].focus();
});

方案2：通用模拟Tab顺序跳转（适配复杂场景） #

如果需要完全复现Tab键按页面元素tabindex顺序跳转的原生逻辑，可以自行实现可聚焦元素的遍历逻辑：

document.getElementById('btn').addEventListener('click', function() {
  // 筛选页面所有可聚焦的可见元素
  const focusableList = Array.from(document.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  )).filter(el => el.offsetParent !== null && !el.disabled);

  const currentFocusIndex = focusableList.findIndex(el => el === document.activeElement);
  // 计算下一个聚焦元素的下标，超出长度则回到开头
  const nextFocusIndex = (currentFocusIndex + 1) % focusableList.length;
  focusableList[nextFocusIndex].focus();
});

内容的提问来源于stack exchange，提问作者Kanagambigai Murugan