Ist es möglich, Tastendruckereignisse programmgesteuert zu simulieren?

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

Eine Nicht-JQuery-Version, die sowohl im Webkit als auch im Gecko funktioniert:

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
  "keydown", // event type: keydown, keyup, keypress
  true,      // bubbles
  true,      // cancelable
  window,    // view: should be window
  false,     // ctrlKey
  false,     // altKey
  false,     // shiftKey
  false,     // metaKey
  40,        // keyCode: unsigned long - the virtual key code, else 0
  0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);

Wenn Sie jQuery 1.3.1 verwenden können:

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

$(function() {
  $('body').keypress(function(e) {
    alert(e.which);
  });

  simulateKeyPress("e");
});

Was Sie tun können, ist das programmgesteuerte Auslösen von Keyevent-Listenern durch Auslösen von Keyevents . Es ist sinnvoll, dies aus Sicht der Sandbox-Sicherheit zuzulassen. Mit dieser Fähigkeit können Sie dann ein typisches Beobachtermuster anwenden . Sie können diese Methode "simulieren" nennen.

Im Folgenden finden Sie ein Beispiel dafür, wie dies im W3C-DOM-Standard zusammen mit jQuery erreicht werden kann:

function triggerClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.querySelector('input[type=submit][name=btnK]'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // preventDefault was called and the event cancelled
  } else {
    // insert your event-logic here...
  }
}

Dieses Beispiel wurde angepasst von: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

In jQuery:

jQuery('input[type=submit][name=btnK]')
  .trigger({
    type: 'keypress',
    which: character.charCodeAt(0 /*the key to trigger*/)      
   });

Seit kurzem gibt es jedoch keine [DOM] -Methode, um Keyevents auszulösen, die die Browser-Sandbox verlassen. Alle großen Browser-Anbieter werden sich an dieses Sicherheitskonzept halten.

Plugins wie Adobe Flash, die auf dem NPAPI basieren und die Umgehung der Sandbox ermöglichen, werden schrittweise eingestellt . Firefox .

Ausführliche Erklärung:

Sie können und dürfen aus Sicherheitsgründen nicht (wie Pekka bereits betont hat). Sie benötigen immer eine Benutzerinteraktion dazwischen. Stellen Sie sich außerdem die Möglichkeit vor, dass die Browser-Anbieter von Benutzern verklagt werden, da verschiedene programmatische Tastaturereignisse zu Spoofing-Angriffen geführt haben.

In diesem Beitrag finden Sie Alternativen und weitere Details. Es gibt immer das Flash-basierte Kopieren und Einfügen. Hier ist ein elegantes Beispiel . Gleichzeitig ist es ein Zeugnis dafür, warum sich das Web von Plugin-Anbietern entfernt.

Bei der Opt-In-CORS-Richtlinie für den programmgesteuerten Zugriff auf Remoteinhalte gilt eine ähnliche Sicherheitseinstellung .

Die Antwort lautet:
Unter normalen Umständen gibt es in der Sandbox-Browserumgebung keine Möglichkeit, Eingabetasten programmgesteuert auszulösen .

Fazit: Ich sage nicht, dass dies in Zukunft unter speziellen Browsermodi und / oder Privilegien für das Endziel des Spielens oder ähnliche Benutzererfahrungen nicht möglich sein wird. Vor dem Aufrufen solcher Modi wird der Benutzer jedoch nach Berechtigungen und Risiken gefragt, ähnlich wie beim Vollbild-API-Modell .

Nützlich: Im Kontext von KeyCodes sind dieses Tool und die Zuordnung von Keycodes nützlich.

Offenlegung: Die Antwort basiert auf der Antwort hier .

Sie können Tastaturereignisse für ein Element wie dieses auslösen

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

Sie können verwenden 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");
  }
}

Ich habe dies nicht getestet, aber es wurde aus dem Code in der Dokumentation von dispatchEvent () angepasst . Sie werden das wahrscheinlich auch lesen wollen, und auch die Dokumente für createEvent () und initKeyEvent ().

Sie können Tastaturereignisse erstellen und auslösen, die entsprechende registrierte Ereignishandler auslösen. Sie erzeugen jedoch keinen Text , wenn sie beispielsweise an ein Eingabeelement gesendet werden.

Um die Texteingabe vollständig zu simulieren, müssen Sie eine Folge von Tastaturereignissen erstellen und den Text des Eingabeelements explizit festlegen. Die Reihenfolge der Ereignisse hängt davon ab, wie gründlich Sie die Texteingabe simulieren möchten.

Die einfachste Form wäre:

$('input').val('123');
$('input').change();

In einigen Fällen keypresskann das Ereignis nicht die erforderliche Funktionalität bieten. Aus Mozilla-Dokumenten können wir ersehen , dass die Funktion veraltet ist:

Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser dies möglicherweise noch unterstützen, wurde es möglicherweise bereits aus den relevanten Webstandards entfernt, wird möglicherweise gerade gelöscht oder nur aus Kompatibilitätsgründen aufbewahrt. Vermeiden Sie die Verwendung und aktualisieren Sie den vorhandenen Code nach Möglichkeit. Die Entscheidung finden Sie in der Kompatibilitätstabelle unten auf dieser Seite. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktioniert.

Da das keypressEreignis aus den beiden folglich ausgelösten Ereignissen keydownund dem folgenden keyupfür denselben Schlüssel kombiniert wird , generieren Sie die Ereignisse einfach einzeln:

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

Aufbauend auf der Antwort von alex2k8 ist hier eine überarbeitete Version, die in allen von jQuery unterstützten Browsern funktioniert (das Problem bestand darin, dass Argumente für jQuery.event.trigger fehlten, die bei Verwendung dieser internen Funktion leicht zu vergessen sind).

// jQuery plugin. Called on a jQuery object, not directly.
jQuery.fn.simulateKeyPress = function (character) {
  // Internally calls jQuery.event.trigger with arguments (Event, data, elem).
  // That last argument, 'elem', is very important!
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};

jQuery(function ($) {
  // Bind event handler
  $('body').keypress(function (e) {
    alert(String.fromCharCode(e.which));
    console.log(e);
  });
  // Simulate the key press
  $('body').simulateKeyPress('x');
});

Sie können dies sogar noch weiter vorantreiben und nicht nur das Ereignis simulieren lassen, sondern auch das Zeichen einfügen (wenn es sich um ein Eingabeelement handelt). Es gibt jedoch viele browserübergreifende Fallstricke, wenn Sie dies versuchen. Verwenden Sie besser ein ausgefeilteres Plugin wie SendKeys .

Für Interessierte können Sie tatsächlich Tastatureingabeereignisse zuverlässig neu erstellen. Um den Text im Eingabebereich zu ändern (Cursor oder Seite über ein Eingabezeichen verschieben), müssen Sie dem DOM-Ereignismodell genau folgen: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Das Modell sollte Folgendes tun:

• Fokus (wird mit dem festgelegten Ziel auf das DOM gesendet)

Dann für jeden Charakter:

• Keydown (auf dem DOM versandt)
• vor der Eingabe (wird am Ziel gesendet, wenn es sich um einen Textbereich oder eine Eingabe handelt)
• Tastendruck (auf dem DOM versandt)
• Eingabe (wird am Ziel gesendet, wenn es sich um einen Textbereich oder eine Eingabe handelt)
• ändern (am Ziel versandt, wenn es eine Auswahl ist)
• Keyup (auf dem DOM versandt)

Dann optional für die meisten:

• Unschärfe (wird im DOM mit dem festgelegten Ziel gesendet)

Dies ändert tatsächlich den Text auf der Seite über Javascript (ohne die Wertanweisungen zu ändern) und löst alle Javascript-Listener / -Handler entsprechend aus. Wenn Sie die Sequenz durcheinander bringen, wird Javascript nicht in der richtigen Reihenfolge ausgelöst, der Text im Eingabefeld ändert sich nicht, die Auswahl ändert sich nicht oder der Cursor bewegt sich nicht zum nächsten Leerzeichen im Textbereich.

Leider wurde der Code für einen Arbeitgeber unter einer NDA geschrieben, so dass ich ihn nicht teilen kann, aber es ist definitiv möglich, aber Sie müssen den gesamten Schlüsseleingabestapel für jedes Element in der richtigen Reihenfolge neu erstellen.

Ab 2019 hat diese Lösung für mich funktioniert:

document.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.
  })
);

Ich habe dies in meinem Browsergame verwendet, um mobile Geräte mit einer simulierten Tastatur zu unterstützen.

Erläuterung: Dieser Code keydownlöst ein einzelnes Ereignis aus, während ein echter Tastendruck ein keydownEreignis (oder mehrere davon, wenn es länger gehalten wird) und dann ein keyupEreignis auslöst , wenn Sie diese Taste loslassen. Wenn Sie keyupEreignisse zu, ist es auch möglich zu simulieren keyupEreignisse durch Änderung "keydown"zu "keyup"Snippet in dem Code.

Dadurch wird das Ereignis auch an die gesamte Webseite gesendet, daher die document. Wenn Sie möchten, dass nur ein bestimmtes Element das Ereignis empfängt, können Sie documentdas gewünschte Element ersetzen .

Dieser Ansatz unterstützt die browserübergreifende Änderung des Werts des Schlüsselcodes . Quelle

var $textBox = $("#myTextBox");

var press = jQuery.Event("keypress");
press.altGraphKey = false;
press.altKey = false;
press.bubbles = true;
press.cancelBubble = false;
press.cancelable = true;
press.charCode = 13;
press.clipboardData = undefined;
press.ctrlKey = false;
press.currentTarget = $textBox[0];
press.defaultPrevented = false;
press.detail = 0;
press.eventPhase = 2;
press.keyCode = 13;
press.keyIdentifier = "";
press.keyLocation = 0;
press.layerX = 0;
press.layerY = 0;
press.metaKey = false;
press.pageX = 0;
press.pageY = 0;
press.returnValue = true;
press.shiftKey = false;
press.srcElement = $textBox[0];
press.target = $textBox[0];
press.type = "keypress";
press.view = Window;
press.which = 13;

$textBox.trigger(press);

Verwenden Sie einfach CustomEvent

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

4 ex wollen Strg + z simulieren

window.addEventListener("keyup",function(ev){
     if(ev.ctrlKey && ev.keyCode === 90) console.log(ev); // or do smth
     })

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

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

Ich weiß nicht, woher es kam, aber es ist hilfreich. Es fügt eine .simulate()Methode hinzu window.KeyEvent, sodass Sie sie einfach mit KeyEvent.simulate(0, 13)zum Simulieren eines enteroder KeyEvent.simulate(81, 81)eines verwenden können'Q' .

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

Dies hat bei mir funktioniert und simuliert ein Keyup für meine Textaera. wenn Sie es für die gesamte Seite nur die wollen setzen KeySimulation()auf <body>wie diese <body onmousemove="KeySimulation()">oder wenn nicht onmousemovedann onmouseoveroder onloadWerke zu.

<script>
function KeySimulation()
{
var e = document.createEvent("KeyboardEvent");
if (e.initKeyboardEvent) {  // Chrome, IE
    e.initKeyboardEvent("keyup", true, true, document.defaultView, "Enter", 0, "", false, "");
} else { // FireFox
    e.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, 13, 0);
}
document.getElementById("MyTextArea").dispatchEvent(e);
}
</script>

<input type="button" onclick="KeySimulation();" value=" Key Simulation " />
<textarea id="MyTextArea" rows="15" cols="30"></textarea>

Aufgrund der einfachen Verwendung in einem Konsolenkontext war es einmal einzeilig. 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);

Hier ist eine Lösung, die in Chrome und Chromium funktioniert (habe nur diese Plattformen getestet). Es scheint, dass Chrome einen Fehler oder einen eigenen Ansatz beim Umgang mit Schlüsselcodes hat, daher muss diese Eigenschaft separat zum KeyboardEvent hinzugefügt werden.

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);
}

Folgendes habe ich gefunden:

function createKeyboardEvent(name, key, altKey, ctrlKey, shiftKey, metaKey, bubbles) {
  var e = new Event(name)
  e.key = key
  e.keyCode = e.key.charCodeAt(0)
  e.which = e.keyCode
  e.altKey = altKey
  e.ctrlKey = ctrlKey
  e.shiftKey = shiftKey
  e.metaKey =  metaKey
  e.bubbles = bubbles
  return e
}

var name = 'keydown'
var key = 'a'

var event = createKeyboardEvent(name, key, false, false, false, false, true)

document.addEventListener(name, () => {})
document.dispatchEvent(event)

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

Geben Sie den keyCode oder die von Ihnen verwendete Eigenschaft ein und wandeln Sie ihn in KeyboardEventInit um

Beispiel

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

Das habe ich mit js / typescript in Chrome versucht. Dank dieser Antwort für die Inspiration.

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

const keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
Object.defineProperty(keyboardEvent, "charCode", {
  get() {
    return 13;
  },
});
x.dispatchEvent(keyboardEvent);

Sobald der Benutzer die betreffende Taste drückt, können Sie einen Verweis darauf speichern und ihn für jedes andere HTML-Element verwenden:

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>

Sie können den keyCode festlegen, wenn Sie ein eigenes Ereignis erstellen. Sie können vorhandene Parameter von jedem realen Tastaturereignis kopieren (Ziele ignorieren, da es die Aufgabe von dispatchEvent ist) und:

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

Ich weiß, dass die Frage nach einer Javascript-Methode zur Simulation eines Tastendrucks fragt. Aber für diejenigen, die nach einer jQuery-Methode suchen:

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e); 

Der entscheidende Teil, um dies zum Laufen zu bringen, besteht darin charCode, dies zu erkennen keyCodeund whichsind allesamt veraltete Methoden . Daher wenn die Codeverarbeitung das Tastendruckereignis verarbeitet, eine dieser drei verwendet, erhält er daher eine falsche Antwort (z. B. eine Standardeinstellung von 0).

Solange Sie mit einer nicht veralteten Methode auf das Tastendruckereignis zugreifen, z key sollten Sie in Ordnung sein.

Zum Abschluss habe ich den grundlegenden Javascript-Code zum Auslösen des Ereignisses hinzugefügt:

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

Ich wollte ein Drücken der Tabulatortaste simulieren ... Wenn wir Trevors Antwort erweitern, können wir sehen, dass eine spezielle Taste wie "Tabulatortaste" gedrückt wird, aber wir sehen nicht das tatsächliche Ergebnis, das ein Drücken der Tabulatortaste hätte. .

Es wurde versucht, diese Ereignisse für 'activeElement' sowie das globale Dokumentobjekt auszulösen. Beide - Code für beide unten hinzugefügt;

Ausschnitt unten:

var element = document.getElementById("firstInput");

document.addEventListener("keydown", function(event) {

  console.log('we got key:', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);

  /* enter is pressed */
  if (event.keyCode == 13) {
    console.log('enter pressed:', event);

    setTimeout(function() {
      /*  event.keyCode = 13;  event.target.value += 'b';  */

      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
    }, 4);

    setTimeout(function() {
      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
    }, 100);



  } else if (event.keyCode != 0) {
    console.log('we got a non-enter press...: :', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);
  }

});

<h2>convert each enter to a tab in JavaScript... check console for output</h2>
<h3>we dispatchEvents on the activeElement... and the global element as well</h3>

<input type='text' id='firstInput' />
<input type='text' id='secondInput' />

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
    Click me to display Date and Time.</button>
<p id="demo"></p>