Ist es möglich, Tastendruckereignisse programmatisch zu simulieren?

Question

Ist es möglich, Tastendruckereignisse programmatisch in JavaScript zu simulieren?

Answer 1

Hier ist eine Bibliothek, die wirklich hilft: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Ich weiß nicht, woher sie stammt, aber sie ist hilfreich. Es fügt eine .simulate() Methode zu window.KeyEvent so verwenden Sie es einfach mit KeyEvent.simulate(0, 13) zur Simulierung einer enter o KeyEvent.simulate(81, 81) für eine 'Q' .

Ich habe es bei https://github.com/ccampbell/mousetrap/tree/master/tests .

Answer 2

Wegen der einfachen Verwendung in einem Konsolenkontext wurde sie einmal einzeilig angelegt. Aber wahrscheinlich immer noch nützlich.

var pressthiskey = "q"/* <-- q for example */;
var e = new Event("keydown");
e.key = pressthiskey;
e.keyCode = e.key.charCodeAt(0);
e.which = e.keyCode;
e.altKey = false;
e.ctrlKey = true;
e.shiftKey = false;
e.metaKey = false;
e.bubbles = true;
document.dispatchEvent(e);

Answer 3

Hier ist eine Lösung, die in Chrome und Chromium funktioniert (ich habe nur diese Plattformen getestet). Es scheint, dass Chrome einen Fehler oder einen eigenen Ansatz zur Behandlung von Tastencodes hat, so dass diese Eigenschaft separat zum KeyboardEvent hinzugefügt werden muss.

    function simulateKeydown (keycode,isCtrl,isAlt,isShift){
        var e = new KeyboardEvent( "keydown", { bubbles:true, cancelable:true, char:String.fromCharCode(keycode), key:String.fromCharCode(keycode), shiftKey:isShift, ctrlKey:isCtrl, altKey:isAlt } );
        Object.defineProperty(e, 'keyCode', {get : function() { return this.keyCodeVal; } });     
        e.keyCodeVal = keycode;
        document.dispatchEvent(e);
    }
    simulateKeydown(39, false, false, false);

Answer 4

Natives JavaScript mit TypeScript-unterstützter Lösung:

Geben Sie den keyCode oder die von Ihnen verwendete Eigenschaft ein und übertragen Sie sie auf KeyboardEventInit

Beispiel

    const event = new KeyboardEvent("keydown", {
              keyCode: 38,
            } as KeyboardEventInit);

Answer 5

Das habe ich mit js/typescript in Chrome versucht. Dank an diese Antwort zur Inspiration.

var x = document.querySelector('input');

var keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
// you can try charCode or keyCode but they are deprecated
Object.defineProperty(keyboardEvent, "key", {
  get() {
    return "Enter";
  },
});
x.dispatchEvent(keyboardEvent);

{
  // example
  document.querySelector('input').addEventListener("keypress", e => console.log("keypress", e.key))
  // unfortunatelly doesn't trigger submit
  document.querySelector('form').addEventListener("submit", e => {
    e.preventDefault();
    console.log("submit")
  })
}

var x = document.querySelector('input');

var keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
// you can try charCode or keyCode but they are deprecated
Object.defineProperty(keyboardEvent, "key", {
  get() {
    return "Enter";
  },
});
x.dispatchEvent(keyboardEvent);

<form>
  <input>
</form>