使用 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

在您的代码基础上有一个 eventKeyboard，但是： - 在调度关键事件之后，接下来是什么？，谁是听众？ - ...我完全听不懂

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

Answer 2

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

KeyboardEvent 文档说得很清楚：

Note: manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.

所以 dispatchEvent 东西根本行不通。

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

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

Programmatically send keys to input using dispatchEvent

javascript

keyboard-events

custom-events

dom-events