如何用纯JS拦截方向键并派发Enter键事件实现表单提交

• 你创建的KeyboardEvent默认没有开启bubbles: true和cancelable: true配置，事件无法向上冒泡到form元素，浏览器内置的表单提交逻辑需要接收冒泡到form节点的Enter事件才会触发。
• 现代浏览器的安全策略限制：仅用户真实操作触发的事件（只读属性isTrusted为true）才能触发浏览器原生默认行为，JS手动生成的合成事件isTrusted固定为false，哪怕所有参数配置正确，也无法触发浏览器自带的表单提交逻辑。

方案1：直接触发表单提交（最稳妥，推荐） #

不需要模拟按键，直接调用表单的提交方法即可，行为和原生Enter提交完全一致：

function triggerEnterKey(elementId) {
  var element = document.getElementById(elementId);
  if (element && element.form) {
    // requestSubmit会触发submit事件、执行表单校验，和原生Enter提交行为完全一致
    element.form.requestSubmit();
    // 也可以选择点击提交按钮实现相同效果：document.getElementById('submit').click()
  }
}

方案2：自定义按键监听适配模拟事件 #

如果你的业务逻辑需要统一走按键事件链路，可以自行监听Enter事件处理提交，此时只要给模拟事件开启冒泡配置就能触发自定义逻辑：
首先给输入框添加自定义Enter事件监听：

input.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    e.preventDefault();
    e.target.form.requestSubmit();
  }
});

然后修改模拟Enter事件的配置项：

const keyEvent = new KeyboardEvent("keydown", {
  key: "Enter",
  code: "Enter",
  keyCode: 13,
  bubbles: true,
  cancelable: true,
  view: window
});

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