在香草 JS 中触发 Enter 按键答案

【问题标题】：Trigger Enter keypress in vanilla JS在香草 JS 中触发 Enter 按键
【发布时间】：2018-08-09 20:27:13
【问题描述】：

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

我发现 initKeyboardEvent 和 initKeyEvent 都已被弃用，即使 e.keyCode 和 e.which 正在从 Web 标准中删除。

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);

&lt;input type="text" id="txtbox" placeholder="trigger enter key press"&gt;

【问题讨论】：

标签： javascript

【解决方案1】：

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

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

同时触发输入到 txtbox 而不是正文

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);

【讨论】：