如何通过浏览器控制台模拟Tab、Enter键实现按钮依次触发操作

核心代码实现 #

以下代码可直接在浏览器控制台执行，按顺序完成你的需求：

// 1. 点击第一个按钮（替换为你的目标按钮选择器，比如class/ID/属性选择器）
document.querySelector('#first-target-btn').click();

// 延迟执行后续操作，确保第一个按钮点击后的页面状态稳定（可根据页面情况调整延迟时长）
setTimeout(() => {
  // 2. 模拟按下Tab键切换焦点到第二个按钮
  document.dispatchEvent(new KeyboardEvent('keydown', {
    key: 'Tab',
    bubbles: true,
    cancelable: true
  }));

  // 再次延迟，确保焦点完成切换
  setTimeout(() => {
    // 3. 模拟按下Enter键触发按钮点击
    document.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'Enter',
      bubbles: true,
      cancelable: true
    }));
  }, 100);
}, 500);

关键注意事项 #

• 替换选择器：将代码中的#first-target-btn替换为第一个按钮实际的CSS选择器，例如：
  • 按class选择：document.querySelector('.primary-btn')
  • 按属性选择：document.querySelector('button[data-action="submit"]')
• 调整延迟时间：如果第一个按钮点击后有弹窗加载、动画等异步操作，可将外层setTimeout的500（毫秒）改为更大的值，比如1000；内层100可根据焦点切换速度微调。
• 多次Tab切换：如果一次Tab无法聚焦到目标按钮，可循环触发Tab事件，例如：

  // 模拟按下3次Tab键
  for (let i = 0; i < 3; i++) {
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
  }
  

• 事件参数说明：bubbles: true确保事件能向上冒泡到文档层面，让焦点元素捕获到键盘事件；cancelable: true保证事件可被正常处理。

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