使用 dispatchEvent 以编程方式将键发送到输入

Question

我正在尝试根据用户操作将字符发送到输入元素。

我正在尝试将KeyboardEvent 与dispatchEvent 一起使用，但无论我做什么，它都不起作用

例如：

let keyEvent = new KeyboardEvent();
keyEvent.key = 'a';
keyEvent.keyCode = 'a'.charCodeAt(0);
keyEvent.which = event['keyCode'];
keyEvent.altKey = false;
keyEvent.ctrlKey = true;
keyEvent.shiftKey = false;
keyEvent.metaKey = false;
keyEvent.bubbles = true;

不确定这是否正确，但我已将其发送如下：

  document.querySelector('input').dispatchEvent(keyEvent);
  document.activeElement.dispatchEvent(keyEvent);
  document.dispatchEvent(keyEvent);

DEMO

如果我在单击按钮之前首先关注输入，则不会发生任何事情。有什么建议在这里可能会出错吗？

Answer 1

实际上，出于安全原因，将KeyboardEvent 分配给input 元素并不会生成您期望的操作。

KeyboardEvent 文件说得很清楚：

注意：手动触发事件不会生成默认操作 与该事件相关联。例如，手动触发按键事件 不会导致该字母出现在焦点文本输入中。在里面 UI 事件的情况下，出于安全原因，这很重要，因为它 防止脚本模拟与 浏览器本身。

所以dispatchEvent 的东西根本行不通。

或者，考虑直接操作input 元素。

Answer 2

在您的代码的基础上，这里是 eventKeyboard，但是： - 派发 keyevent 之后，wath 的下一个？，谁是听众？ - ...我完全看不懂

document.querySelector('button').addEventListener('mousedown', (e) => {
        e.preventDefault();
      e.stopImmediatePropagation();
        e.stopPropagation();

      console.log('send key');

    /*let keyEvent = new KeyboardEvent();

    keyEvent.key = 'a';
    keyEvent.keyCode = 'a'.charCodeAt(0);
    keyEvent.which = event['keyCode'];
    keyEvent.altKey = false;
    keyEvent.ctrlKey = true;
    keyEvent.shiftKey = false;
    keyEvent.metaKey = false;
    keyEvent.bubbles = true;
    console.log(keyEvent);       */
    var keyEvent = new KeyboardEvent("keydown", {
      bubbles : true,
      cancelable : true,
      char : "A",
      key : "1",
      shiftKey : true,
      keyCode : 81
  });
      document.querySelector('input').dispatchEvent(keyEvent);
      document.activeElement.dispatchEvent(keyEvent);
      document.dispatchEvent(keyEvent);
    console.log(keyEvent);
});