javascript - 在 Vanilla JS 中触发 Enter 按键

Question

我试图在我的输入上触发一个 enter keypress 事件，而不是实际按下 enter 键，更多的只是 onload。

我发现 initKeyboardEvent和 initKeyEvent都被弃用了，甚至 e. keyCode和e。 which正在从网络标准中删除。

I also found this post上面介绍了如何在 jQuery 中执行此操作。但是，我一直在尝试弄清楚如何在 vanilla JS 中执行此操作，但没有成功。

var txtbox = document.getElementById('txtbox');
txtbox.onkeydown = function(e) {
  if (e.keyCode == 13) {
    alert('enter key pressed');
  }
  e.preventDefault();
};

var ev = document.createEvent('KeyboardEvent');
// Send key '13' (= enter)
ev.initKeyboardEvent(
    'keydown', true, true, window, false, false, false, false, 13, 0);
document.body.dispatchEvent(ev);

<input type="text" id="txtbox" placeholder="trigger enter key press">

Answer 1

由于 initKeyboardEvent 已弃用，请改用构造函数: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

event.key 没有被弃用，所以我们可以使用 key === "Enter"

同样触发在 txtbox 而不是 body 上输入

var txtbox = document.getElementById('txtbox');
txtbox.onkeydown = function(e) {
  if (e.key == "Enter") {
    alert('enter key pressed');
  }
  e.preventDefault();
};

var ev = new KeyboardEvent('keydown', {altKey:false,
  bubbles: true,
  cancelBubble: false, 
  cancelable: true,
  charCode: 0,
  code: "Enter",
  composed: true,
  ctrlKey: false,
  currentTarget: null,
  defaultPrevented: true,
  detail: 0,
  eventPhase: 0,
  isComposing: false,
  isTrusted: true,
  key: "Enter",
  keyCode: 13,
  location: 0,
  metaKey: false,
  repeat: false,
  returnValue: false,
  shiftKey: false,
  type: "keydown",
  which: 13});

txtbox.dispatchEvent(ev);