Ist es möglich, Tastendruckereignisse programmatisch zu simulieren?

Question

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

Answer 1

Eine Nicht-Jquery-Version, die sowohl in Webkit als auch in 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);

Answer 2

Sie können Tastaturereignisse auf einer EreignisZiel (Element, Fenster, Dokument, andere) wie diese:

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

---

Allerdings, dispatchEvent den Wert des Eingabefelds nicht aktualisieren und möglicherweise nicht das Verhalten auslösen, das ein normaler Tastendruck auslöst, wahrscheinlich wegen der Ereignis.isTrusted Eigenschaft, was ich nicht weiß, ob es eine Möglichkeit gibt, diese zu umgehen.

Sie können einen Eingang aber auch ändern, indem Sie seine value .

element.value += "a";

---

Ejemplo:

let element = document.querySelector('input');
element.onkeydown = e => alert(e.key);
changeValButton.onclick = () => element.value += "a";
dispatchButton.onclick = () => {
   element.dispatchEvent(new KeyboardEvent('keydown', {'key': 'a'}));
}

<input/>
<button id="dispatchButton">Press to dispatch event </button>
<button id="changeValButton">Press to change value </button>

---

Sie können dem Ereignis bei Bedarf weitere Eigenschaften hinzufügen, wie in diese Antwort . Werfen Sie einen Blick auf die KeyboardEvent-Dokumentation

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

Außerdem, da keypress es déprécié können Sie keydown + keyup zum Beispiel:

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

Answer 3

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js">
</script>

Answer 4

Was Sie tun können, ist programmatisch auslösen Zuhörer von Schlüsselereignissen durch Brennen Schlüsselereignisse . Es ist sinnvoll, dies aus einer Sandbox-Sicherheitsperspektive zuzulassen. Mit dieser Fähigkeit können Sie dann eine typische Beobachter-Muster . Man könnte diese Methode "simulieren" nennen.

Nachfolgend 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*/)      
   });

Aber bis vor kurzem gab es keine [DOM]-Möglichkeit, Tastenereignisse beim Verlassen der Browser-Sandbox tatsächlich auszulösen. Und alle großen Browser-Hersteller werden sich an dieses Sicherheitskonzept halten.

Was Plugins wie Adobe Flash betrifft, die auf der NPAPI basieren und die Umgehung der Sandbox ermöglichen, so sind diese Auslaufende ; Firefox .

Ausführliche Erläuterung:

Das können und dürfen Sie aus Sicherheitsgründen nicht tun (wie Pekka bereits dargelegt hat). Sie werden immer eine Benutzerinteraktion dazwischen benötigen. Stellen Sie sich außerdem vor, dass die Browser-Anbieter von den Benutzern verklagt werden könnten, weil verschiedene programmatische Tastatur-Ereignisse zu Spoofing-Angriffen geführt haben.

Siehe dies Beitrag für Alternativen und weitere Details. Es gibt immer noch das flashbasierte Kopieren und Einfügen. Hier ist eine elegante Beispiel . Gleichzeitig ist es ein Beweis dafür, dass sich das Web von den Plugin-Anbietern entfernt.

Ein ähnliches Sicherheitsdenken gilt auch für die Opt-in CORS-Richtlinie um programmatisch auf entfernte Inhalte zuzugreifen.

Die Antwort lautet:
Es gibt keine Möglichkeit, Eingabetasten in der Sandbox-Browserumgebung unter normalen Umständen programmatisch auszulösen. .

Das Fazit: Damit will ich nicht sagen, dass es in Zukunft nicht möglich sein wird, im Rahmen spezieller Browsermodi und/oder Privilegien, die auf das Ziel von Spielen oder ähnlichen Benutzererfahrungen ausgerichtet sind. Vor dem Eintritt in solche Modi wird der Nutzer jedoch nach den Berechtigungen und Risiken gefragt, ähnlich wie bei der Vollbild-API-Modell .

Nützlich: Im Zusammenhang mit den KeyCodes, este Tool und die Zuordnung von Tastencodes nützlich sein wird.

Offenlegung: Die Antwort basiert auf der Antwort aquí .

Answer 5

Ab 2019 hat sich diese Lösung für mich bewährt:

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 Browserspiel verwendet, um mobile Geräte mit einer simulierten Tastatur zu unterstützen.

Klarstellung: Dieser Code sendet eine einzelne keydown Ereignis, während ein echter Tastendruck eines auslösen würde keydown Veranstaltung (oder mehrere, wenn sie länger dauert), und dann eine keyup Ereignis, wenn Sie die Taste loslassen. Wenn Sie benötigen keyup Ereignissen ist es auch möglich, zu simulieren keyup Ereignisse durch Änderung "keydown" a "keyup" im Codeschnipsel.

Dadurch wird das Ereignis auch an die gesamte Webseite gesendet, daher die document . Wenn Sie möchten, dass nur ein bestimmtes Element das Ereignis erhält, können Sie durch document für das gewünschte Element.