HOWTO · JavaScript
So erkennen Sie Tastatureingabeereignisse in JavaScript
Erfahren Sie in unserem umfassenden Leitfaden, wie Sie Tastatureingabeereignisse in JavaScript erkennen. Entdecken Sie verschiedene Methoden wie keydown, keyup und keypress, komplett mit Codebeispielen und ausführlichen Erklärungen. Verbessern Sie Ihre Webanwendungen, indem Sie die Erkennung von Tastatureingaben beherrschen, und schaffen Sie interaktive Benutzererlebnisse.
Auf dieser Seite
Tastatureingaben auf einer Webseite werden mit Tastaturereignissen behandelt. Registrieren Sie einen Listener mit addEventListener() und lesen Sie dann das Ereignisobjekt, das an seinen Callback übergeben wird. Verwenden Sie keydown, um zu reagieren, wenn eine Taste gedrückt wird, und keyup, um zu reagieren, nachdem sie losgelassen wurde.
Mit addEventListener() auf Tastaturereignisse lauschen
Hängen Sie den Listener an das Element, das die Eingabe empfangen soll. Verwenden Sie document, wenn die Seite reagieren soll, solange sich der Fokus irgendwo auf der Seite befindet, oder hängen Sie ihn an ein Formularsteuerelement, wenn das Verhalten zu diesem Steuerelement gehört. Der Callback erhält ein KeyboardEvent als Parameter, also benennen Sie diesen Parameter und lesen Sie seine Eigenschaften, statt sich auf einen globalen event-Wert zu verlassen.
Diese ausführbare Veranschaulichung verwendet einen kleinen Ersatz für document und liefert ein Tastenereignis, sodass ihre Listener-Form in einer JavaScript-Laufzeitumgebung ausprobiert werden kann. Verwenden Sie in einem Browser das echte document, um Tastatureingaben zu empfangen.
const listeners = new Map();
const document = {
addEventListener(type, callback) {
listeners.set(type, callback);
}
};
document.addEventListener("keydown", (event) => {
console.log(`Key pressed: ${event.key}`);
});
listeners.get("keydown")({ key: "ArrowDown" });
Ein echter Browser ruft den Callback auf, wenn der Benutzer eine Taste drückt. Der obige Ersatz ruft ihn mit einem Objekt auf, das denselben key-Wert enthält, den der Handler verwendet; er simuliert keine Browsereingaben oder anderes KeyboardEvent-Verhalten.
Zwischen keydown und keyup wählen
Ein keydown-Ereignis wird ausgelöst, wenn eine Taste gedrückt wird. Es eignet sich gut für Aktionen, die sofort beginnen sollen, etwa das Bewegen einer Spielfigur, während eine Taste gehalten wird. Ein keyup-Ereignis wird ausgelöst, wenn die Taste losgelassen wird, was zu Aktionen passt, die geschehen sollen, sobald der Benutzer das Halten einer Taste beendet. Wählen Sie das Ereignis danach, wann die Aktion eintreten soll. Eine gehaltene Taste kann wiederholte keydown-Ereignisse erzeugen, also berücksichtigen Sie dies, wenn eine Aktion nur einmal geschehen soll.
KeyboardEvent.key lesen und Sondertasten behandeln
Verwenden Sie event.key, um die Taste in einem Handler zu identifizieren. Es gibt lesbare Werte wie "a", "Enter" und "ArrowDown" zurück, was Vergleiche unkompliziert macht. Zum Beispiel kann ein Pfeiltasten-Handler prüfen, ob event.key === "ArrowDown" ist, bevor er ein Element nach unten bewegt. Der Modifikatorstatus ist auf dem Ereignis ebenfalls verfügbar, über Eigenschaften wie event.shiftKey und event.ctrlKey.
Der Wert von event.key spiegelt die Bedeutung der Taste unter dem aktiven Tastaturlayout und den Modifikatoren wider. Verwenden Sie event.code, wenn das Verhalten einer physischen Tastenposition folgen soll, etwa eine Spielsteuerung, die über Layouts hinweg an derselben Stelle bleibt. Für gewöhnliche Befehle und benannte Tasten ist event.key in der Regel die klarere Wahl.
Die Standardaktion einer Taste bei Bedarf verhindern
Ein Tastaturereignis-Handler kann event.preventDefault() aufrufen, um eine mit dieser Taste verbundene Browseraktion zu unterdrücken, etwa das Scrollen, wenn eine Pfeiltaste für eine benutzerdefinierte Oberfläche verwendet wird. Rufen Sie es nur auf, wenn die Seite die Verantwortung für diese Aktion übernimmt, und prüfen Sie event.cancelable, wenn das Verhalten von der Abbruchbarkeit abhängt. Es hindert das Ereignis nicht daran, andere Listener zu erreichen; verwenden Sie Ausbreitungsmethoden nur, wenn das ebenfalls das beabsichtigte Verhalten ist. Die gewöhnliche Tastenerkennung benötigt keinen Abbruch.
Warum keypress in der Regel vermieden werden sollte
Vermeiden Sie die Verwendung von keypress für die neue Tastaturbehandlung. Es ist veraltet und deckt nicht die gesamte Bandbreite der Tasten konsistent ab. Verwenden Sie keydown oder keyup, um Tastaturaktionen zu beobachten, und event.key, um den Tastenwert zu lesen. Verlassen Sie sich bei aktuellem Code nicht auf event.char oder die veraltete keyCode-Eigenschaft; verwenden Sie die Standard-Ereigniseigenschaften, die die Taste und ihren Zustand beschreiben.
