如何在网页中按下回车键时全局触发按钮点击事件？

想要实现无论页面焦点在哪个元素上，按下回车键都触发指定按钮的点击事件，其实只需要把键盘事件监听绑定到全局的document对象上，而不是单个输入元素。这样整个页面范围内的键盘操作都会被捕获到。

完整实现代码 #

<!-- 页面中的目标按钮 -->
<button id="myBtn">点击执行操作</button>

<script>
// 先获取要触发的按钮元素
const targetButton = document.getElementById('myBtn');

// 给整个文档绑定keyup事件监听
document.addEventListener('keyup', function(event) {
    // 判断是否按下的是回车键（两种写法都可以，选你习惯的）
    if (event.keyCode === 13 || event.key === 'Enter') {
        // 阻止浏览器的默认行为（比如避免页面内表单自动提交）
        event.preventDefault();
        // 主动触发按钮的点击事件
        targetButton.click();
    }
});

// 可以给按钮加个点击反馈，方便验证效果
targetButton.addEventListener('click', function() {
    alert('按钮被成功触发啦！');
});
</script>

几个关键细节要注意 #

• 全局事件绑定：把监听器挂在document上，就能捕获页面内所有元素的键盘事件，不管当前焦点在输入框、按钮还是其他元素上。
• 回车键的判断方式：event.keyCode === 13是传统写法，event.key === 'Enter'更语义化，两种都能正常工作，推荐后者更易读。
• 阻止默认行为：event.preventDefault()一定要加，不然如果页面里有表单，按下回车会默认提交表单，干扰你的自定义逻辑。
• 自定义扩展：如果后续需要排除某些元素（比如输入框里按下回车不想触发按钮），可以在回调里判断event.target的类型，比如：

  // 示例：如果焦点在输入框/文本域里，就不触发按钮
  if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
      return;
  }
  

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