Die Tastatur ist eines der am häufigsten verwendeten Eingabegeräte für Informationen. Bei der Entwicklung von Webanwendungen müssen Sie häufig die Tastatureingaben des Benutzers überwachen. Dazu können Sie JavaScript verwenden, ein leistungsfähiges Werkzeug, mit dem Sie den Code der Taste abrufen können, auf die der Benutzer geklickt hat.
Sie können das Ereignis verwenden, um den Code der gedrückten Taste auf der Tastatur in JavaScript abzurufen keydown. Dieses Ereignis tritt auf, wenn Sie eine Taste drücken. Sie können den Schlüsselcode im Ereignishandler abrufen, indem Sie die Eigenschaft verwenden keyCode Ereignisobjekt:
Der resultierende Tastencode kann je nach gedrückter Taste für verschiedene Aktionen verwendet werden. Wenn Sie beispielsweise die Eingabetaste drücken, können Sie ein Formular senden, das modale Fenster schließen, indem Sie die Esc-Taste drücken usw.
Beachten Sie, dass die Eigenschaft keyCode ist veraltet, und es wird empfohlen, stattdessen die Eigenschaft zu verwenden key. Eigenschaft key enthält ein Zeichen, das der gedrückten Taste entspricht, wodurch der Code verständlicher und einfacher zu verifizieren ist:
Jetzt wissen Sie, wie Sie den Code einer gedrückten Taste auf Ihrer Tastatur mit JavaScript abrufen können. Dies kann bei der Entwicklung von Webanwendungen hilfreich sein, die das Nachverfolgen von Tastaturereignissen durch den Benutzer erfordern.
Abrufen des Codes einer gedrückten Taste auf der Tastatur: Handbuch
Sie können JavaScript verwenden, um den Code der gedrückten Taste auf der Tastatur abzurufen. Hier ist ein Beispielcode:
document.addEventListener('keydown', function(event) console.log(event.keyCode);>);In diesem Beispiel fügen wir einen Ereignis-Listener hinzu keydown für ein Element document. Wenn der Benutzer eine Taste auf der Tastatur drückt, wird eine Funktion aufgerufen, bei der wir den Code der gedrückten Taste mithilfe der Eigenschaft erhalten keyCode Objekts event. Um den resultierenden Code später zu verarbeiten, geben wir ihn mithilfe einer Methode an die Konsole aus log Objekts console.
Beachten Sie, dass die Eigenschaft keyCode ist veraltet und es wird empfohlen, die Eigenschaft zu verwenden key gibt den Namen der gedrückten Taste an. Jedoch ist die Eigenschaft key funktioniert nicht in allen Browsern, daher ist die Eigenschaft keyCode immer noch weit verbreitet.
Jetzt, da Sie wissen, wie Sie den Code der gedrückten Taste auf Ihrer Tastatur erhalten, können Sie diese Informationen verwenden, um interaktive Webanwendungen, Spiele und andere Projekte zu entwickeln.
Methode 1: Keydown-Ereignis
Das Keydown-Ereignis wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur drückt und sie nicht loslässt. An diesem Punkt können Sie den Schlüsselcode mithilfe der keyCode-Eigenschaft des Ereignisobjekts abrufen.
document.addEventListener('keydown', function(event) );In diesem Beispiel fügen wir dem Dokument einen Keydown-Ereignishandler hinzu. Wenn der Benutzer eine Taste drückt, wird der Schlüsselcode in die Variable keyCode geschrieben und an die Konsole ausgegeben.
Mit dieser Methode können Sie die Codes beliebiger Tasten auf der Tastatur abrufen und für verschiedene Zwecke verwenden, z. B. um bestimmte Aktionen beim Drücken einer Taste zu verarbeiten.
Methode 2: Keyup-Ereignis
Um das Keyup-Ereignis zu verwenden, müssen Sie diesem Ereignistyp einen Handler hinzufügen. Der Handler wird jedes Mal aufgerufen, wenn der Benutzer die Taste nach dem Drücken loslässt.
Beispiel für die Verwendung des Keyup-Ereignisses:
document.addEventListener("keyup", function(event) // Ereignishandlercode >);
Innerhalb des Ereignishandlers können Sie den Code der gedrückten Taste mithilfe der event-Eigenschaft abrufen.keyCode. Um beispielsweise den Eingabetaste-Code (Code 13) abzurufen, müssen Sie den Wert der event-Eigenschaft überprüfen.keyCode:
document.addEventListener("keyup", function(event) if (event.keyCode === 13) // code, der ausgeführt wird, wenn die Eingabetaste gedrückt wird > >);
Sie können auch die event-Methode verwenden.code zum Abrufen des Tastennamens:
Der Name der gedrückten Taste wird in der Konsole angezeigt. Zum Beispiel wird für die Eingabetaste "Enter" angezeigt, für die Umschalttaste "Umschalttaste" usw.
Mithilfe des Keyup-Ereignisses können Sie interaktive Anwendungen erstellen, die auf Tastatureingaben reagieren.
Methode 3: Keypress-Ereignis
Um das Keypress-Ereignis zu verwenden, müssen Sie dem gewünschten Element einen Ereignishandler hinzufügen. Wenn Sie beispielsweise den Tastenanschlag auf der gesamten Seite verfolgen möchten, können Sie dem document-Objekt einen Handler hinzufügen:
document.addEventListener('keypress', function(event) );In diesem Beispiel fügen wir dem Dokument einen Keypress-Ereignishandler hinzu und geben den Code der gedrückten Taste an die Konsole aus. Nun wird jedes Mal, wenn der Benutzer eine Taste drückt, der Code für diese Taste in der Konsole ausgegeben.
Es ist wichtig zu beachten, dass das Keypress-Ereignis nicht für alle Tasten ausgelöst wird, insbesondere für Modifikatortasten wie Umschalt und Strg. Auch im Keypress-Ereignis ist es nicht möglich, das Drücken von Funktionstasten wie F1 oder Enter zu verfolgen. Es wird empfohlen, eine Kombination aus Keydown- und Keyup-Ereignissen zu verwenden, um alle Tasten vollständig zu verfolgen.
