如何使用JS实现点击按钮时触发回车键事件？

核心思路是手动构造符合标准的回车键键盘事件，再将事件分发到你绑定了回车监听的目标元素上即可。

补全后的triggerEnterKey函数实现 #

const triggerEnterKey = () => {
  // 构造回车键盘事件
  const enterEvent = new KeyboardEvent('keydown', {
    key: 'Enter',
    keyCode: 13,
    which: 13,
    bubbles: true, // 开启事件冒泡，保证上层监听能捕获
    cancelable: true
  })

  // 场景1：要触发全局的回车监听，直接将事件分发到document
  document.dispatchEvent(enterEvent)

  // 场景2：要触发某个特定元素（比如输入框）的回车监听，替换为以下写法
  // const targetEl = document.querySelector('#你的元素ID')
  // targetEl.dispatchEvent(enterEvent)
}

注意事项 #

• 如果你实际绑定的回车监听是keypress或者keyup事件，需要把构造事件的第一个参数对应修改为'keypress'/'keyup'，事件类型匹配才能触发回调
• 如果需要兼容极低版本IE，可改用document.createEvent('KeyboardEvent')的旧API实现事件构造，现代浏览器无需适配

完整可运行测试示例 #

你可以用以下代码验证效果，输入内容后点击按钮即可触发输入框的回车监听：

<!-- 测试用输入框 -->
<input type="text" id="demo-input" placeholder="输入内容后点击按钮测试">
<p id="result"></p>

<script>
// 给输入框绑定回车监听，用于验证效果
document.querySelector('#demo-input').addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    document.querySelector('#result').textContent = `✅ 回车触发成功，输入内容为：${e.target.value}`
  }
})

const triggerEnterKey = () => {
  const enterEvent = new KeyboardEvent('keydown', {
    key: 'Enter',
    keyCode: 13,
    which: 13,
    bubbles: true,
    cancelable: true
  })
  // 将回车事件分发到输入框
  document.querySelector('#demo-input').dispatchEvent(enterEvent)
}
</script>

<button onClick={()=> {triggerEnterKey()}}>Trigger enter key</button>

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