Javascript - 模拟Chrome 53上的关键事件 [英] Javascript - simulate key events on Chrome 53

问题描述

我试图在 Chrome 53 上模拟关键事件（按下）。
我在StackOverflow上找到的所有解决方案似乎都不工作。

我的目标是获得一个函数，该函数获取 keyCode 并模拟按键 - 纯JS是必需的

  function keyPressSimulate（keyCode）{...？} 
  

我已经试过的代码示例：

  Node.prototype.fire = function（type，options）{
 var event = new CustomEvent（type）; 
 for（var p in options）{
 event [p] = options [p]; 
} 
 this.dispatchEvent（event）; 
 
 $ b document.fire（keyup，{ctrlKey：true，keyCode：90，bubbles：true}）
  

另一个：
$ b $ pre $ 按键：函数（k）{
var e = new Event（keydown）;
e.keyCode = k;
e.which = e.keyCode;
e.altKey = false;
e.ctrlKey = true;
e.shiftKey = false;
e.metaKey = false;
document.dispatchEvent（e）;



和：

  var e = new KeyboardEvent（keydown，{bubbles：true，cancelable：true，key：Q，shiftKey：true}）; 
 global.document.dispatchEvent（e）; 
  

和：

  presskey：function（k）{
 var keyboardEvent = document.createEvent（KeyboardEvent）; 
 
 var initMethod = typeof keyboardEvent.initKeyboardEvent！=='undefined'？ initKeyboardEvent：initKeyEvent; 
 
 
 keyboardEvent [initMethod]（
keydown，
 true，// bubbles oOooOOo0 
 true，//可取消
窗口， //查看
 false，// ctrlKeyArg 
 false，// altKeyArg 
 false，// shiftKeyArg 
 false，// metaKeyArg 
k，
 0 / / charCode 
）; 
 
 global.document.activeElement.dispatchEvent（keyboardEvent）; 
 
  

解决方案 keyCode 属性已被弃用，无法在使用专用的 KeyboardEvent

时设置。 ，您可以使用自定义事件并将其设置为2步操作的任何属性（如果在构造函数中使用，它将被忽略）：

 < div id =testonkeydown =this.textContent = event.keyCode;>< / div> 
< button onclick =
 var e = new Event（'keydown'）; 
 e.keyCode = 42; 
 document.getElementById（'test'）。dispatchEvent e）; 
>点击我< /按钮> 
  

按照评论编辑
用户交互以文档中的特定元素为目标。

例如，用户在键盘上击键是一系列事件（keydown，keyup，keypress）。其中一些被浏览器捕获以填充输入字段的值，然后将它们作为事件传送给Javascript。 （1）检测焦点在哪里，（2）基于默认浏览器行为更新焦点元素的属性，以及（2）根据默认浏览器行为更新焦点元素的属性，以及然后（3）在目标元素上触发适当的事件。

I am trying to simulate key event (press) on Chrome 53. All the solutions that I found on StackOverflow seems not to be working..

My goal is to have a function that gets a keyCode and simulates a key press with it - Pure JS is required

function keyPressSimulate(keyCode) {...?}

Code samples that I already tried:

Node.prototype.fire=function(type,options){
     var event=new CustomEvent(type);
     for(var p in options){
         event[p]=options[p];
     }
     this.dispatchEvent(event);
}

 document.fire("keyup",{ctrlKey:true,keyCode:90,bubbles:true})

Another one:

presskey:  function(k) {
                var e = new Event("keydown");
                e.keyCode= k;
                e.which=e.keyCode;
                e.altKey=false;
                e.ctrlKey=true;
                e.shiftKey=false;
                e.metaKey=false;
                document.dispatchEvent(e);
            }

And:

var e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, key : "Q", shiftKey : true});
global.document.dispatchEvent(e);

And:

presskey:  function(k) {
            var keyboardEvent = document.createEvent("KeyboardEvent");

            var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";


            keyboardEvent[initMethod](
                               "keydown",
                                true,      // bubbles oOooOOo0
                                true,      // cancelable
                                window,    // view
                                false,     // ctrlKeyArg
                                false,     // altKeyArg
                                false,     // shiftKeyArg
                                false,     // metaKeyArg
                                k,
                                0          // charCode
            );

            global.document.activeElement.dispatchEvent(keyboardEvent);
         }

解决方案

The keyCode property is deprecated and cannot be set while using the dedicated KeyboardEvent

However, you can use a custom event and set whatever property you want as a 2 step operation (it will be ignored if used in the constructor):

<div id="test" onkeydown="this.textContent = event.keyCode;"></div>
<button onclick="
    var e = new Event('keydown'); 
    e.keyCode = 42; 
    document.getElementById('test').dispatchEvent(e);
    ">click me</button>

Edit as per comments An event is triggered from a user interaction targeting a specific element in the document.

For instance, a user hitting a key on the keyboard is a succession of events (keydown, keyup, keypress). Some of those are captured by the browser to fill in the value of an input field, and then they are transmitted to Javascript as events. There are no feasible way to emulate a user hitting a key from within the Javascript sandbox except than to do it manually (1) detect where the focus is, (2) update the properties of the focussed element based on the default browser behavior, and then (3) trigger the appropriate events on the target element.

这篇关于Javascript - 模拟Chrome 53上的关键事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！