it-swarm.com.de

Auslösen eines Tastaturereignisses in JavaScript

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

Ich habe das versucht:

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

... und auch das:

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, werden die keyCode/which -Eigenschaften des Ereignisobjekts auf 0 Gesetzt, nicht 115.

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

70
Steve Harrison

Ich arbeite an DOM Keyboard Event Level 3 Polyfill . In den neuesten Browsern oder mit dieser Polyfüllung können Sie Folgendes 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})

AKTUALISIEREN:

Jetzt unterstützt meine 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 hier

Zusätzlich gibt es hier das browserübergreifende initKeyboardEvent getrennt von meiner Polyfill: (Gist)

Polyfill Demo

32
termi

Haben Sie die Veranstaltung korrekt versendet?

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 Folgendes tun:

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

Dies liegt an einem Fehler im Webkit.

Sie können den Webkit-Fehler umgehen, indem Sie createEvent('Event') anstelle von createEvent('KeyboardEvent') verwenden und anschließend die Eigenschaft keyCode zuweisen. Siehe diese Antwort und dieses Beispiel .

15
John

Das Mozilla Developer Network bietet die folgende Erklärung:

  1. Erstellen Sie ein Ereignis mit event = document.createEvent("KeyboardEvent")
  2. Initialisiere das Schlüsselereignis

mit:

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
       ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
           keyCodeArg, charCodeArg)
  1. Ereignis auslösen mit yourElement.dispatchEvent(event)

Ich sehe nicht den letzten Code in Ihrem Code, vielleicht fehlt Ihnen dieser. Ich hoffe das funktioniert auch in IE ...

8
Javache

Ich bin damit nicht sehr gut, aber KeyboardEvent => see KeyboardEvent wird mit initKeyEvent initialisiert.
Hier ist ein Beispiel für die Ausgabe eines Ereignisses für <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" />
1
vutar