onKeyPress vs. onKeyUp und onKeyDown

Question

Worin besteht der Unterschied zwischen diesen drei Ereignissen? Beim Googeln habe ich das gefunden:

• El onKeyDown Ereignis wird ausgelöst, wenn der Benutzer eine Taste drückt.
• El onKeyUp Ereignis wird ausgelöst, wenn der Benutzer eine Taste loslässt.
• El onKeyPress Ereignis wird ausgelöst, wenn der Benutzer eine Taste drückt und loslässt ( onKeyDown gefolgt von onKeyUp ).

Die ersten beiden Punkte verstehe ich, aber ist nicht onKeyPress dasselbe wie onKeyUp ? Ist es möglich, einen Schlüssel freizugeben ( onKeyUp ), ohne sie zu drücken ( onKeyDown )?

Das ist ein bisschen verwirrend, kann mir das jemand erklären?

Answer 1

ANMERKUNG KeyPress ist jetzt Abgelehnt . Verwenden Sie KeyDown stattdessen.

KeyPress , KeyUp y KeyDown sind jeweils analog zu: Click , MouseUp, y MouseDown .

1. Down geschieht zuerst
2. Press erfolgt sekündlich (bei Texteingabe)
3. Up erfolgt zuletzt (wenn die Texteingabe abgeschlossen ist).

Die Ausnahme ist webkit die ein zusätzliches Ereignis enthält:

keydown
keypress
textInput     
keyup

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

Answer 2

Hier finden Sie die archivierten Link ursprünglich in dieser Antwort verwendet.

Aus diesem Link:

Theoretisch kann die onKeyDown y onKeyUp Ereignisse stehen für das Drücken oder Loslassen von Tasten, während die onKeyPress Ereignis stellt ein Zeichen dar, das getippt wird. Die Umsetzung der Theorie ist nicht in allen Browsern gleich.

Answer 3

Die meisten Antworten konzentrieren sich mehr auf die Theorie als auf die Praxis, und es gibt einige große Unterschiede zwischen keyup y keypress in Bezug auf Eingabefeldwerte, zumindest in Firefox (getestet in 43).

Wenn der Benutzer Folgendes eingibt 1 in ein leeres Eingabeelement:

1. Der Wert des Eingabeelements ist ein leerer String (alter Wert) innerhalb der keypress Handler

2. Der Wert des Eingabeelements wird sein 1 (neuer Wert) innerhalb der keyup Handler.

Dies ist von entscheidender Bedeutung, wenn Sie etwas tun, bei dem es darauf ankommt, den neuen Wert nach der Eingabe und nicht den aktuellen Wert zu kennen, z. B. bei der Inline-Validierung oder der automatischen Tabulierung.

Szenario:

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

Wenn die keypress Ereignis wird nach Eingabe des Buchstabens ausgelöst A enthält das Textfeld jetzt nur noch den Buchstaben A .

Aber:

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

Es scheint also, dass der Browser (Firefox 43) die Auswahl des Benutzers löscht, dann feuert die keypress Veranstaltung, dann aktualisiert den Inhalt der Felder, dann Brände keyup .

Answer 4

Erstens haben sie eine andere Bedeutung: Sie schießen:

• KeyDown - wenn eine Taste gedrückt wurde hinuntergestoßen
• KeyUp - wenn eine Taste gedrückt wurde veröffentlicht y nach der Wert von input/textarea wird aktualisiert (der einzige unter diesen)
• KeyPress - zwischen diesen und bedeutet eigentlich nicht eine Taste gedrückt und losgelassen wurde (siehe unten). Sie hat nicht nur eine inkonsistente Semantik, sie war Abgelehnt also sollte man es wahrscheinlich nicht verwenden (siehe auch este Zusammenfassung)

Zweitens, einige Tasten lösen einige dieser Ereignisse aus und andere nicht . Zum Beispiel,

• KeyPress ignoriert delete , Pfeile, PgUp / PgDn , home / end , ctrl , alt , shift usw., während KeyDown und KeyUp dies nicht tun (siehe Einzelheiten zu esc unten);
• wenn Sie das Fenster über alt + tab in Windows, nur KeyDown für alt ausgelöst wird, weil das Umschalten des Fensters vor jedem anderen Ereignis erfolgt (und KeyDown für tab wird vom System verhindert, nehme ich an, zumindest in Chrome 71).

Außerdem sollten Sie bedenken, dass event.keyCode (und event.which ) haben normalerweise den gleichen Wert für KeyDown und KeyUp, aber einen anderen für KeyPress. Versuchen Sie die Spielplatz Ich habe erstellt. Übrigens ist mir eine Besonderheit aufgefallen: Wenn ich in Chrome auf ctrl + a y el input / textarea leer ist, denn KeyPress feuert mit event.keyCode (und event.which ) gleich 1 ! (wenn die Eingabe nicht leer ist, wird sie gar nicht ausgelöst).

Schließlich gibt es einige Pragmatik :

• Für die Handhabung von Pfeilen müssen Sie wahrscheinlich onKeyDown verwenden: Wenn der Benutzer die Taste wird KeyDown mehrmals ausgelöst (während KeyUp nur einmal ausgelöst wird, wenn sie die Taste loslassen). Außerdem können Sie in einigen Fällen die Weitergabe von KeyDown leicht verhindern, die Weitergabe von KeyUp jedoch nicht (oder nicht so leicht) (z. B. wenn Sie bei Eingabe abschicken möchten, ohne dem Textfeld einen Zeilenumbruch hinzuzufügen).
• Wenn Sie eine Taste gedrückt halten, zum Beispiel in textarea Da sowohl KeyPress als auch KeyDown mehrfach ausgelöst werden (Chrome 71), würde ich KeyDown verwenden, wenn ich ein Ereignis benötige, das mehrfach ausgelöst wird, und KeyUp für eine einzelne Tastenfreigabe.
• KeyDown ist in der Regel besser für Spiele geeignet, bei denen man eine bessere Reaktionsfähigkeit auf die Aktionen der Spieler gewährleisten muss.
• esc wird normalerweise über KeyDown verarbeitet: KeyPress löst nicht aus und KeyUp verhält sich anders für input s und textarea s in verschiedenen Browsern (meist aufgrund von Fokusverlusten)
• Wenn Sie die Höhe eines Textbereichs an den Inhalt anpassen möchten, werden Sie wahrscheinlich nicht onKeyDown verwenden, sondern onKeyPress ( PS ok, es ist eigentlich besser, onChange für diesen Fall zu verwenden ).

Ich habe alle 3 in meinem Projekt verwendet, aber leider habe ich vielleicht einige der pragmatischen Aspekte vergessen. (zu beachten: es gibt auch input y change Ereignisse)

Answer 5

onkeydown wird ausgelöst, wenn die Taste gedrückt ist (wie bei Tastenkombinationen; zum Beispiel in Ctrl+A , Ctrl nach unten" gehalten wird.

onkeyup wird ausgelöst, wenn die Taste losgelassen wird (einschließlich Modifikatortasten usw.)

onkeypress wird als eine Kombination aus onkeydown y onkeyup oder abhängig von der Tastaturwiederholung (wenn onkeyup nicht abgefeuert wird). (Dieses wiederholte Verhalten habe ich nicht getestet. Wenn Sie es testen, fügen Sie einen Kommentar hinzu!)

textInput (nur Webkit) wird ausgelöst, wenn ein Text eingegeben wird (zum Beispiel, Shift+A würde ein großes 'A' eingeben, aber Ctrl+A würde Text auswählen und keine Texteingabe vornehmen. In diesem Fall werden alle anderen Ereignisse ausgelöst)