通过 JS 中的调度事件以编程方式输入输入

Question

怎样才能像用键盘打字一样输入呢？我知道我们可以通过设置输入值来做到这一点，但是我如何才能真正模拟键盘输入呢？

以下是显示 keydown 但在输入中不键入任何内容的示例代码。

html代码：

<p>Info: <input id="info" style="width:50%"></p>
<p>show: <input id="show" style="width:50%"></p>
<p><button onclick="showType()">Type in show</button></p

js代码：

document.addEventListener("keydown", function(ev) {
  document.getElementById("info").value = 
    "key= "+ev.key+" : "+ev.code+" : "+ev.keyCode;
}, true);

function showType(){
  document.getElementById("show").focus()
  document.getElementById("show").dispatchEvent(
  new KeyboardEvent("keydown", {
    key: "d",
    code: "KeyD",
    keyCode: 68,
    shiftKey: false,
    ctrlKey: false,
    metaKey: false
  })
);
}

代码笔链接

Answer 1

基于MDN，出于安全原因，这是不允许的。因此，您需要手动更新该值。

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