如何使用香草JavaScript模拟浏览器窗口中的键盘按键?

时间:2019-06-15 07:05:39

标签: javascript html dom ecmascript-6

我知道之前也曾问过类似的问题,但是我能找到的所有答案都在jQuery中,或者似乎不再起作用。我试过做

的变体
function send(char, elem) {
   let e = new KeyboardEvent('keydown', {key: char});
   elem.dispatchEvent(e);
}

但是没有运气。它调度了该事件并触发了适当的处理程序,但是如果将input / textarea元素作为焦点,则不会键入键。

1 个答案:

答案 0 :(得分:0)

您不能使键入发生在通过代码触发的事件中-您可以设置侦听器,并创建自定义事件,以免将触发的事件与常规按键混淆。

$("#button").on("click", function() {
  $("#input").trigger({
    type: "myKeypress",
    which: "A".charCodeAt(0)
  });
});

$("#input").on("myKeypress", function(e) {
  $(this).val($(this).val() + String.fromCharCode(e.which));
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input type="text" id="input">
<button id="button">Type A</button>

您也可以使用所有键进行此操作:

$("#button").on("click", function() {
  $("#input").trigger({
    type: "myKeypress",
    which: prompt("Enter a letter").charCodeAt(0)
  });
});

$("#input").on("myKeypress", function(e) {
  $(this).val($(this).val() + String.fromCharCode(e.which));
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input type="text" id="input">
<button id="button">Type a letter</button>