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，但是： - 在发送关键事件后，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);
});

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

2 个答案: