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

【问题标题】：Type in input programmatically via dispatch event in JS通过 JS 中的调度事件以编程方式输入输入
【发布时间】：2020-07-31 07:34:55
【问题描述】：

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

这是显示 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
  })
);
}

codepen link

【问题讨论】：

标签： javascript html input dom-events keyboard-events

【解决方案1】：

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

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

【讨论】：