Auslösen eines Tastatur-Ereignisses in Safari, mit JavaScript

Question

Ich versuche, ein Tastaturereignis in Safari mit JavaScript zu simulieren.

Ich habe dies versucht:

var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 115, 0);

...und auch dies:

var event = document.createEvent("UIEvents");
event.initUIEvent("keypress", true, true, window, 1);
event.keyCode = 115;

Nachdem ich beide Ansätze ausprobiert habe, habe ich jedoch das gleiche Problem: Nachdem der Code ausgeführt wurde, wird die keyCode / which Eigenschaften des Ereignisobjekts werden auf 0 , nicht 115 .

Weiß jemand, wie man ein Tastaturereignis in Safari zuverlässig erstellt und versendet? (Ich würde es vorziehen, es in einfachem JavaScript zu erreichen, wenn möglich).

Answer 1

Ich arbeite an DOM Keyboard Event Level 3 Polyfill . In den neuesten Browsern oder mit diesem Polyfill können Sie etwas wie folgt tun:

element.addEventListener("keydown", function(e){ console.log(e.key, e.char, e.keyCode) })

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

//If you need legacy property "keyCode"
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
delete e.keyCode;
Object.defineProperty(e, "keyCode", {"value" : 666})

UPDATE:

Jetzt unterstützt mein Polyfill die Legacy-Eigenschaften "keyCode", "charCode" und "which"

var e = new KeyboardEvent("keydown", {
    bubbles : true,
    cancelable : true,
    char : "Q",
    key : "q",
    shiftKey : true,
    keyCode : 81
});

Beispiele aquí

Zusätzlich hier ist Cross-Browser initKeyboardEvent getrennt von meinem Polyfill: (gist)

Polyfill Demo

Answer 2

Haben Sie das Ereignis korrekt versandt?

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

Wenn Sie jQuery verwenden, können Sie das tun:

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}

Answer 3

Dies ist zurückzuführen auf eine Fehler in Webkit.

Sie können den Webkit-Fehler umgehen, indem Sie createEvent('Event') statt createEvent('KeyboardEvent') und dann die Zuweisung der keyCode Eigentum. Siehe diese Antwort y dieses Beispiel .

Answer 4

Le site Mozilla-Entwickler-Netzwerk liefert die folgende Erklärung:

1. Erstellen Sie ein Ereignis mit event = document.createEvent("KeyboardEvent")
2. Initiieren des Schlüsselereignisses

verwenden:

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
       ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
           keyCodeArg, charCodeArg)

3. Versenden Sie das Ereignis mit yourElement.dispatchEvent(event)

Ich sehe den letzten Punkt in Ihrem Code nicht, vielleicht ist es das, was Sie vermissen. Ich hoffe, das funktioniert auch im IE...

Answer 5

Ich bin nicht sehr gut auf diesem Gebiet, aber KeyboardEvent => siehe KeyboardEvent wird initialisiert mit initKeyEvent .
Hier ist ein Beispiel für das Senden von Ereignissen bei <input type="text" /> Element

document.getElementById("txbox").addEventListener("keypress", function(e) {
  alert("Event " + e.type + " emitted!\nKey / Char Code: " + e.keyCode + " / " + e.charCode);
}, false);

document.getElementById("btn").addEventListener("click", function(e) {
  var doc = document.getElementById("txbox");
  var kEvent = document.createEvent("KeyboardEvent");
  kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74);
  doc.dispatchEvent(kEvent);
}, false);

<input id="txbox" type="text" value="" />
<input id="btn" type="button" value="CLICK TO EMIT KEYPRESS ON TEXTBOX" />