Keycode Checker

Keycode Checker ist ein Entwicklertool, mit dem Sie sofort überprüfen können, wie die von Ihnen im Browser gedrückten Tastaturtasten als Ereignisdaten in JavaScript erkannt werden.

In der Frontend-Entwicklung ist eine genaue Tastenerkennung erforderlich, wenn Tastenkombinationen oder Spielsteuerungen basierend auf Benutzereingaben implementiert werden. Mit diesem Tool können Sie Tasten-Eigenschaften wie event.key, event.code und event.keyCode auf einen Blick abrufen und mit einem einzigen Klick kopieren. Es ist auch einfach, das Verhalten verschiedener Tastaturlayouts (wie JIS oder US) und Kombinationen mit Modifikatortasten wie Shift und Ctrl zu testen.

Sie können auch Ihren Tastatureingabeverlauf überprüfen und die Unterdrückung von Browser-Standardaktionen (wie Tab-Navigation oder Space-Scrollen) sicher im Browser testen, wenn e.preventDefault() aktiviert ist.

event.key

Repräsentiert das Zeichen oder die Funktion, die der Benutzer tatsächlich eingegeben hat. Zum Beispiel liefert das Drücken von Shift + 1 auf einer US-Tastatur ! als event.key. Es ist die am meisten empfohlene Eigenschaft zur Auswertung der logischen Eingabe.

event.code

Gibt die physische Position der gedrückten Taste an. Unabhängig vom Sprachlayout der Tastatur liefert das Drücken der Taste an der 'A'-Position immer KeyA zurück. Dies ist sehr nützlich für Aktionen, die vom physischen Layout abhängen, wie z. B. die WASD-Bewegung in Spielen.

event.keyCode / event.which

Gibt einen systemabhängigen numerischen Code zurück, der der gedrückten Taste zugewiesen ist (z. B. 65 für A). Obwohl diese Eigenschaften lange Zeit in der JavaScript-Entwicklung verwendet wurden, gelten sie nun als veraltet (deprecated). Sie sollten nur für Kompatibilitätsprüfungen verwendet werden.

event.location

Eine Zahl, die den physischen Bereich der Tastatur angibt, in dem die Taste gedrückt wurde. Sie unterscheidet zwischen Standardtasten (0), linken Modifikatoren (1), rechten Modifikatoren (2) und Ziffernblocktasten (3).

preventDefault()

Eine JavaScript-Methode, mit der das durch ein Ereignis ausgelöste Standardverhalten des Browsers abgebrochen wird, wie z. B. das Scrollen nach unten beim Drücken der Leertaste.

Q.Kann ich das auf einem Smartphone oder Tablet verwenden?

Es funktioniert einwandfrei, wenn eine physische Tastatur angeschlossen ist. Bei einer Bildschirmtastatur wird das keydown-Ereignis je nach Betriebssystem oder Browser-Implementierung möglicherweise nicht richtig ausgelöst oder gibt immer denselben Keycode (z. B. 229) zurück. Dieses Tool ist für die Verwendung mit physischen Tastaturen vorgesehen.

Q.Sollte ich event.key oder event.code verwenden?

Das hängt vom Anwendungsfall ab. Wenn Sie die Bedeutung der Taste oder das eingegebene Zeichen auswerten möchten (z. B. „Drücken Sie Enter zum Senden“), verwenden Sie event.key. Wenn Sie jedoch Aktionen auf die physische Position auf der Tastatur stützen möchten (z. B. „Charakter mit W, A, S, D bewegen“), ist die Verwendung von event.code die Best Practice.

Q.Kann ich Shortcuts wie F5 oder Ctrl+W verhindern?

Auch wenn Sie die JavaScript-Methode e.preventDefault() verwenden, können Sie mächtige, vom Betriebssystem oder Browser reservierte Tastenkombinationen wie das Schließen von Tabs, das Neuladen von Fenstern oder das Öffnen der Browser-Entwicklertools möglicherweise nicht vollständig verhindern.

Q.Warum ist event.keyCode als veraltet (deprecated) markiert?

Weil der zurückgegebene numerische Wert je nach Browser, Betriebssystem und Tastaturlayout variieren kann, was zu Kompatibilitätsproblemen führt. Derzeit wird empfohlen, stattdessen event.key oder event.code zu verwenden.

Q.Werden die eingegebenen Tastendaten an einen Server gesendet?

Nein, sie werden nicht gesendet. Die gesamte Verarbeitung erfolgt clientseitig über JavaScript in Ihrem Browser. Der Verlauf Ihrer Tasteneingaben wird niemals an externe Server gesendet oder dort gespeichert.

Hier sind typische Entwicklungsszenarien, in denen die Überprüfung von Keycodes erforderlich ist.