是否有可能以编程方式模拟按键事件?

是否可以在JavaScript中以编程方式模拟按键事件?

当前回答

这对我来说是有效的，它确实为我的textaera模拟了一个按键。如果你想在整个页面中使用它，只需将KeySimulation()放在<body>上，就像这样<body onmousemove="KeySimulation()“>或如果不是onmousemove，那么onmouseover或onload也可以。

2017-03-13 02:33:21

其他回答

你可以在EventTarget(元素，窗口，文档等)上分派键盘事件，如下所示:

element.dispatchEvent(new KeyboardEvent('keydown', {'key': 'a'}));

但是，dispatchEvent可能不会更新输入字段值，也可能不会触发常规键盘按下的行为，这可能是因为Event的原因。itrusted property，我不知道是否有办法绕过

但是你也可以通过设置输入值来改变输入。

element.value += "a";

例子:

let element = document.querySelector('input'); 元素。Onkeydown = e =>警报(e.key); changeValButton。Onclick =() =>元素。Value += "a"; dispatchButton。Onclick = () => { 元素。dispatchEvent(new KeyboardEvent('keydown'， {'key': 'a'})); ｝ <输入/ > <button id="dispatchButton">按下分派事件</button> <button id="changeValButton">按下按钮更改值</button> . </button id="changeValButton">

您可以根据需要向事件添加更多属性，如本答案所示。看一下KeyboardEvent文档

element.dispatchEvent(new KeyboardEvent("keydown", {
    key: "e",
    keyCode: 69, // example values.
    code: "KeyE", // put everything you need in this object.
    which: 69,
    shiftKey: false, // you don't need to include values
    ctrlKey: false,  // if you aren't going to use them.
    metaKey: false   // these are here for example's sake.
}));

此外，由于keypress已弃用，您可以使用keydown + keyup，例如:

element.dispatchEvent(new KeyboardEvent('keydown', {'key':'Shift'} ));
element.dispatchEvent(new KeyboardEvent( 'keyup' , {'key':'Shift'} ));

对于使用ReactJS的页面，这是一个尝试模拟键盘行为的线程

2017-05-25 22:40:29

让它工作的关键部分是认识到charCode, keyCode和这些都是不推荐的方法。因此，如果处理按键事件的代码使用这三个中的任何一个，那么它将收到一个伪答案(例如，默认值为0)。

只要使用非弃用的方法(如key)访问按键事件，就应该没问题。

为了完成，我添加了触发事件的基本Javascript代码:

const rightArrowKey = 39 const event = new KeyboardEvent('keydown'，{'key':rightArrowKey}) document.dispatchEvent(事件)

2019-08-12 17:26:35

对于那些感兴趣的人，您可以可靠地重新创建键盘输入事件。为了更改输入区域中的文本(移动游标，或通过输入字符移动页面)，必须严格遵循DOM事件模型:http://www.w3.org/TR/DOM-Level-3-Events/#h4_events-inputevents

该模型应该做到:

焦点(使用目标设置在DOM上分派)

然后对于每个字符:

keydown(在DOM上分派) Beforeinput(如果它是一个文本区域或输入，在目标分派) 按键(在DOM上分派) 输入(如果是文本区域或输入，则在目标处分派) 改变(如果它是一个选择，在目标分派) keyup(在DOM上分派)

然后，可选的大多数:

模糊(随目标设置在DOM上分派)

这实际上是通过javascript改变页面中的文本(不修改值语句)，并适当地设置任何javascript侦听器/处理程序。如果你把顺序弄乱了，javascript就不会按适当的顺序触发，输入框中的文本不会改变，选择不会改变，或者光标不会移动到文本区域的下一个空格。

不幸的是，代码是为雇主写的，所以我不能分享它，但这绝对是可能的，但你必须以正确的顺序为每个元素重新创建整个关键输入“堆栈”。

编辑:我不是这个答案的原始海报，但我已经测试过了，我不能让它更新输入字段。下面是一个代码片段，其中的代码供其他人尝试或查看

2014-05-30 22:40:40

只要用户按下有问题的键，你就可以存储对该even的引用，并将其用于任何HTML其他元素:

EnterKeyPressToEmulate<input class="lineEditInput" id="addr333_1" type="text" style="width:60%;right:0%;float:right" onkeydown="keyPressRecorder(event)"></input> TypeHereToEmulateKeyPress<input class="lineEditInput" id="addr333_2" type="text" style="width:60%;right:0%;float:right" onkeydown="triggerKeyPressOnNextSiblingFromWithinKeyPress(event)"> Itappears Here Too<input class="lineEditInput" id="addr333_3" type="text" style="width:60%;right:0%;float:right;" onkeydown="keyPressHandler(event)"> <script> var gZeroEvent; function keyPressRecorder(e) { gZeroEvent = e; } function triggerKeyPressOnNextSiblingFromWithinKeyPress(TTT) { if(typeof(gZeroEvent) != 'undefined') { TTT.currentTarget.nextElementSibling.dispatchEvent(gZeroEvent); keyPressHandler(TTT); } } function keyPressHandler(TTT) { if(typeof(gZeroEvent) != 'undefined') { TTT.currentTarget.value+= gZeroEvent.key; event.preventDefault(); event.stopPropagation(); } } </script>

如果你创建自己的事件，你可以设置keyCode，你可以从任何真实的键盘事件复制现有的参数(忽略目标，因为它的工作dispatchEvent)和:

ta = new KeyboardEvent('keypress',{ctrlKey:true,key:'Escape'})

2018-03-25 06:55:28

你可以使用dispatchEvent():

function simulateKeyPress() {
  var evt = document.createEvent("KeyboardEvent");
  evt.initKeyboardEvent("keypress", true, true, window,
                    0, 0, 0, 0,
                    0, "e".charCodeAt(0))
  var body = document.body;
  var canceled = !body.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

我没有对此进行测试，但它改编自dispatchEvent()文档中的代码。您可能需要通读这些文档，以及createEvent()和initKeyEvent()的文档。

2009-05-08 12:44:24

是否有可能以编程方式模拟按键事件?

推荐文章

最新文章

标签