onKeyPress Vs. onKeyUp und onKeyDown

Was ist der Unterschied zwischen diesen drei Ereignissen? Beim googeln stellte ich fest, dass:

• Das onKeyDownEreignis wird ausgelöst, wenn der Benutzer eine Taste drückt.
• Das onKeyUpEreignis wird ausgelöst, wenn der Benutzer einen Schlüssel freigibt.
• Das onKeyPressEreignis wird ausgelöst, wenn der Benutzer eine Taste drückt und loslässt ( onKeyDowngefolgt von onKeyUp).

Ich verstehe die ersten beiden, aber ist das nicht onKeyPressdasselbe wie onKeyUp? Ist es möglich, eine Taste ( onKeyUp) loszulassen, ohne sie zu drücken ( onKeyDown)?

Das ist ein bisschen verwirrend, kann jemand das für mich klären?

Suchen Sie hier nach dem archivierten Link, der ursprünglich in dieser Antwort verwendet wurde.

Von diesem Link:

Theoretisch stellen die Ereignisse onKeyDownund onKeyUpdie Tasten dar, die gedrückt oder losgelassen werden, während das onKeyPressEreignis ein Zeichen darstellt, das eingegeben wird. Die Implementierung der Theorie ist nicht in allen Browsern gleich.

KeyPress, KeyUpUnd KeyDownsind analog zu jeweils: Click, MouseUp,und MouseDown.

1. Down passiert zuerst
2. Press passiert als zweites (wenn Text eingegeben wird)
3. Up passiert zuletzt (wenn die Texteingabe abgeschlossen ist).

Die Ausnahme ist das Webkit , in dem ein zusätzliches Ereignis enthalten ist:

keydown
keypress
textInput     
keyup

Unten finden Sie einen Ausschnitt, mit dem Sie selbst sehen können, wann die Ereignisse ausgelöst werden:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

Die meisten Antworten hier konzentrieren sich mehr auf Theorie als auf praktische Fragen, und es gibt einige große Unterschiede zwischen keyupund keypressin Bezug auf Eingabefeldwerte, zumindest in Firefox (getestet in 43).

Wenn der Benutzer 1ein leeres Eingabeelement eingibt:

1. Der Wert des Eingabeelements ist eine leere Zeichenfolge (alter Wert) im keypressHandler

2. Der Wert des Eingabeelements befindet sich 1(neuer Wert) im keyupHandler.

Dies ist von entscheidender Bedeutung, wenn Sie etwas tun, das darauf beruht, den neuen Wert nach der Eingabe zu kennen und nicht den aktuellen Wert, wie z. B. Inline-Validierung oder Auto-Tabbing.

Szenario:

1. Der Benutzer gibt 12345ein Eingabeelement ein.
2. Der Benutzer wählt den Text aus 12345.
3. Der Benutzer gibt den Buchstaben ein A.

Wenn das keypressEreignis nach Eingabe des Buchstabens Aausgelöst wird, enthält das Textfeld nur noch den Buchstaben A.

Aber:

1. Field.val () ist 12345.
2. $ Field.val (). Länge ist 5
3. Die Benutzerauswahl ist eine leere Zeichenfolge (sodass Sie nicht feststellen können, was durch Überschreiben der Auswahl gelöscht wurde).

So scheint es , dass der Browser (Firefox 43) die Auswahl des Benutzers löscht, dann löst der keypressFall, dann die Felder Inhalte aktualisiert, dann feuert keyup.

onkeydownwird ausgelöst, wenn die Taste gedrückt ist (wie bei Verknüpfungen; z. B. in Ctrl+A, Ctrlwird gedrückt gehalten).

onkeyup wird ausgelöst, wenn die Taste losgelassen wird (einschließlich Modifikator / etc-Tasten)

onkeypresswird als Kombination von onkeydownund onkeyupoder abhängig von der Tastaturwiederholung onkeyupausgelöst (wenn nicht ausgelöst). (Dieses Wiederholungsverhalten habe ich nicht getestet. Wenn Sie testen, fügen Sie einen Kommentar hinzu!)

textInput(nur Webkit) wird ausgelöst, wenn Text eingegeben wird (z. B. Shift+Awürde Großbuchstaben 'A' eingegeben, aber Ctrl+AText ausgewählt und keine Texteingabe eingegeben. In diesem Fall werden alle anderen Ereignisse ausgelöst).

Erstens haben sie eine andere Bedeutung: Sie feuern:

• KeyDown - wenn eine Taste gedrückt wurde
• KeyUp - wenn ein gedrückter Knopf losgelassen wurde und nachdem der Wert von Eingabe / Textbereich aktualisiert wurde (der einzige unter diesen)
• KeyPress - zwischen diesen und bedeutet nicht, dass eine Taste gedrückt und losgelassen wurde (siehe unten).

Zweitens lösen einige Schlüssel einige dieser Ereignisse aus und andere nicht . Zum Beispiel,

• KeyPress ignoriert delete, Pfeile, PgUp/ PgDn, home/ end, ctrl, alt, shiftusw. während KeyDown und KeyUp nicht (siehe Details über escunten);
• Wenn Sie in Windows das Fenster über alt+ wechseln tab, wird nur KeyDown für altBrände ausgelöst, da das Umschalten des Fensters vor jedem anderen Ereignis erfolgt (und KeyDown für tabwird vom System zumindest in Chrome 71 vom System verhindert).

Beachten Sie außerdem, dass event.keyCode(und event.which) normalerweise den gleichen Wert für KeyDown und KeyUp haben, für KeyPress jedoch einen anderen. Probieren Sie den Spielplatz aus, den ich erstellt habe. Übrigens habe ich eine ziemliche Eigenart bemerkt: Wenn ich in Chrome ctrl+ drücke aund das input/ textarealeer ist, wird KeyPress mit event.keyCode(und event.which) gleich ausgelöst 1! (Wenn der Eingang nicht leer ist, wird er überhaupt nicht ausgelöst).

Schließlich gibt es einige Pragmatik :

• Für die Behandlung von Pfeilen müssen Sie wahrscheinlich onKeyDown verwenden: Wenn der Benutzer ↓gedrückt hält , wird KeyDown mehrmals ausgelöst (während KeyUp nur einmal ausgelöst wird, wenn die Schaltfläche losgelassen wird). In einigen Fällen können Sie auch die Weitergabe von KeyDown leicht verhindern, aber nicht (oder nicht so leicht) die Weitergabe von KeyUp verhindern (z. B. wenn Sie bei der Eingabe senden möchten, ohne dem Textfeld eine neue Zeile hinzuzufügen).
• Überraschenderweise würde ich KeyDown verwenden, wenn Sie einen Schlüssel gedrückt halten, z. B. textareaKeyPress und KeyDown, werden mehrmals verwendet (Chrome 71), wenn ich das Ereignis benötige, das mehrmals ausgelöst wird, und KeyUp für die Freigabe eines einzelnen Schlüssels.
• KeyDown ist normalerweise besser für Spiele, wenn Sie besser auf ihre Aktionen reagieren müssen.
• escwird normalerweise über KeyDown verarbeitet: KeyPress wird nicht ausgelöst und KeyUp verhält sich für inputs und textareas in verschiedenen Browsern unterschiedlich (hauptsächlich aufgrund von Fokusverlust ).
• Wenn Sie die Höhe eines Textbereichs an den Inhalt anpassen möchten, verwenden Sie wahrscheinlich nicht onKeyDown, sondern onKeyPress ( PS ok, in diesem Fall ist es eigentlich besser, onChange zu verwenden ).

Ich habe alle 3 in meinem Projekt verwendet, aber leider etwas Pragmatik vergessen. (zu beachten: es gibt auch inputund changeEreignisse)

Dieser Artikel von Jan Wolter ist das beste Stück, das mir begegnet ist. Die archivierte Kopie finden Sie hier, wenn der Link tot ist.

Es erklärt alle Browser-Schlüsselereignisse wirklich gut,

Das Keydown- Ereignis tritt auf, wenn die Taste gedrückt wird, unmittelbar gefolgt vom Tastendruckereignis. Dann wird das keyup Ereignis wird generiert, wenn die Taste losgelassen wird.

Um den Unterschied zwischen Tastendruck und Tastendruck zu verstehen , ist es hilfreich, zwischen Zeichen und Tasten zu unterscheiden . Eine Taste ist eine physische Taste auf der Tastatur des Computers. Ein Zeichen ist ein Symbol, das durch Drücken einer Taste eingegeben wird. Wenn Sie auf einer US-Tastatur die 4Taste drücken, während Sie die ShiftTaste gedrückt halten, wird normalerweise ein "Dollarzeichen" erzeugt. Dies ist nicht unbedingt bei jeder Tastatur der Welt der Fall. In der Theorie die keydown und keyup repräsentieren Ereignisse Tasten gedrückt werden oder freigegeben, während die keypressEreignis repräsentiert ein Zeichen, das eingegeben wird. In der Praxis wird dies nicht immer so umgesetzt.

Für eine Weile haben einige Browser unmittelbar nach dem Tastendruck ein zusätzliches Ereignis namens textInput ausgelöst . Frühere Versionen des DOM 3-Standards beabsichtigten dies als Ersatz für das Tastendruckereignis , aber der gesamte Begriff wurde später widerrufen. Webkit hat dies zwischen den Versionen 525 und 533 unterstützt, und mir wurde gesagt, dass IE es unterstützt, aber ich habe das nie erkannt, möglicherweise weil Webkit den Namen textInput forderte, während IE es textinput nannte .

Es gibt auch ein Ereignis namens Eingabe , das von allen Browsern unterstützt wird und unmittelbar nach einer Änderung an einem Textbereich oder Eingabefeld ausgelöst wird . Normalerweise wird ein Tastendruck ausgelöst, dann wird das eingegebene Zeichen im Textbereich angezeigt und die Eingabe wird ausgelöst. Das Eingabeereignis gibt keine Informationen darüber, welcher Schlüssel eingegeben wurde. Sie müssen das Textfeld überprüfen, um herauszufinden, was sich geändert hat. Daher betrachten wir es nicht wirklich als Schlüsselereignis und dokumentieren es hier nicht wirklich . Obwohl es ursprünglich nur für Textbereiche und Eingabefelder definiert wurde, gibt es meiner Meinung nach eine gewisse Tendenz, es zu verallgemeinern, um auch auf andere Arten von Objekten zu feuern.

Es scheint, dass onkeypress und onkeydown dasselbe tun (innerhalb des kleinen Unterschieds der oben bereits erwähnten Tastenkombinationen).

Sie können dies versuchen:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

Und Sie werden sehen, dass die Ereignisse beim Drücken der Taste und beim Herunterfahren beide ausgelöst werden, während die Taste gedrückt wird, und nicht, wenn die Taste gedrückt wird.

Der Unterschied besteht darin, dass das Ereignis nicht nur einmal, sondern mehrmals ausgelöst wird (solange Sie die Taste gedrückt halten). Seien Sie sich dessen bewusst und gehen Sie entsprechend damit um.

Das Ereignis onkeypress funktioniert für alle Tasten außer ALT, STRG, UMSCHALT, ESC in allen Browsern, wobei das Ereignis onkeydown für alle Tasten funktioniert. Bedeutet, dass das Ereignis onkeydown alle Schlüssel erfasst.

Ich wollte nur eine Neugier teilen:

Wenn Sie das onkeydown-Ereignis zum Aktivieren einer JS-Methode verwenden, stimmt der Zeichencode für dieses Ereignis NICHT mit dem überein, den Sie mit onkeypress erhalten!

Zum Beispiel geben die Numpad-Tasten die gleichen Zeichen wie die Zifferntasten über den Buchstabentasten zurück, wenn Sie onkeypress verwenden, aber NICHT, wenn Sie onkeydown verwenden!

Ich habe einige Sekunden gebraucht, um herauszufinden, warum mein Skript, das nach bestimmten Zeichencodes gesucht hat, bei der Verwendung von onkeydown fehlgeschlagen ist!

Demo: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

und ja. Ich weiß, dass die Definition der Methoden unterschiedlich ist. Aber was sehr verwirrend ist, ist, dass bei beiden Methoden das Ergebnis des Ereignisses mit event.keyCode abgerufen wird. Aber sie geben nicht den gleichen Wert zurück. Nicht sehr deklarative Umsetzung.

Grundsätzlich verhalten sich diese Ereignisse bei verschiedenen Browsertypen und -versionen unterschiedlich. Ich habe einen kleinen jsBin-Test erstellt. Sie können in der Konsole nachsehen, wie sich diese Ereignisse für Ihre Zielumgebung verhalten. Hoffen Sie, dass diese Hilfe hilft. http://jsbin.com/zipivadu/10/edit

Aktualisierte Antwort:

Taste nach unten

• Wird mehrmals ausgelöst, wenn Sie die Tasten gedrückt halten.
• Feuert den Metaschlüssel ab.

Tastendruck

• Wird mehrmals ausgelöst, wenn Sie die Tasten gedrückt halten.
• Feuert keine Metaschlüssel ab.

KeyUp

• Wird am Ende einmal ausgelöst, wenn Sie den Schlüssel loslassen.
• Feuert den Metaschlüssel ab.

Dies ist das Verhalten in addEventListenerund jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <- Beispiel versuchen

(Antwort wurde mit korrekter Antwort, Screenshot & Beispiel bearbeitet)

Einige praktische Fakten, die hilfreich sein können, um zu entscheiden, welches Ereignis behandelt werden soll (führen Sie das folgende Skript aus und konzentrieren Sie sich auf das Eingabefeld):

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

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

Drücken:

• nicht Einführungs / Tipptasten (zB Shift, Ctrl) wird ein nicht auslösen keypress. Drücken Sie Ctrlund lassen Sie es los:

  Keydown 17 17 Steuerung

  keyup 17 17 Steuerung

• Tasten von Tastaturen , die Zeichen Transformationen in andere Zeichen können führen gelten Toten und duplizieren „Schlüssel“ (zB ~, ´) auf keydown. Drücken ´und loslassen , um eine doppelte anzuzeigen ´´:

  Keydown 192 192 Tot

  keydown 192 192 ´´

  Tastendruck 180 180 ´

  Tastendruck 180 180 ´

  keyup 192 192 Tot

Darüber hinaus <input type="range">lösen nicht tippende Eingaben (z. B. Fernkampf ) weiterhin alle Keyup-, Keydown- und Tastendruckereignisse entsprechend den gedrückten Tasten aus.