JavaScript-Tastencode-Finder

Name: JavaScript-Tastencode-Finder
Author: Kitmul

Finden Sie den JavaScript-Event-Key, Code und Which-Wert für jede Taste, die Sie drücken.

Entdecken Sie JavaScript-Tastencodes, Event-Codes und Tastenwerte durch Drücken einer beliebigen Taste. Dieses kostenlose interaktive Tool erfasst Tastaturereignisse in Echtzeit und zeigt keyCode, event.key, event.code und which-Eigenschaften an. Unverzichtbar für Entwickler, die Tastaturkurzel, Spielsteuerungen, Barrierefreiheitsfunktionen und benutzerdefinierte Eingabehandler erstellen. Alles wird lokal in Ihrem Browser verarbeitet.

event.key

Press any key

event.code

Drücken Sie eine beliebige Taste auf Ihrer Tastatur, um deren Wert zu sehen.

Deine Daten bleiben in deinem Browser

War dieses Tool hilfreich?

Dieses Tool bewerten

Anleitung

Wie man es benutzt

Nutzungsschritt

Finden Sie den JavaScript-Event-Key, Code und Which-Wert für jede Taste, die Sie drücken.

Guide

Vollständiger Leitfaden zu JavaScript-Tastencodes

Was sind JavaScript-Tastencodes?

JavaScript-Tastencodes sind numerische Werte, die jeder Taste zugeordnet sind. Wenn eine Taste gedruckt wird, feuert der Browser Ereignisse (keydown, keyup, keypress) mit Eigenschaften wie keyCode, key, code und which. keyCode gibt eine Ganzzahl zurück (z.B. 13 für Enter), event.key gibt einen String zurück ('Enter'). event.code reprasentiert die physische Taste unabhängig vom Tastaturlayout, wertvoll für Spiele und internationale Unterstützung.

Warum Tastencode-Nachschlagen wichtig ist

Tastaturgesteuerte Oberflachen erfordern genaue Codes für Zieltasten. Ob Tastenkombinationen (Strg+S zum Speichern), Spielsteuerungen (WASD), barrierefreie Navigation (Tab, Enter, Escape) oder Hotkeys — zuverlässige Referenzen sind unerlasslich. Verschiedene Browser gaben historisch unterschiedliche Werte zurück, was ein interaktives Tool essentiell macht.

Unterschiede zwischen Key, Code und KeyCode

event.key gibt die logische Bedeutung zurück (z.B. 'a' oder 'A' je nach Shift). event.code gibt den physischen Identifier zurück (z.B. 'KeyA' unabhängig vom Layout). Das veraltete event.keyCode gibt eine Ganzzahl zurück. Moderne Webentwicklung bevorzugt event.key und event.code gegenüber dem veralteten keyCode, aber Legacy-Code nutzt es noch intensiv.

Best Practices für Tastaturereignis-Behandlung

Verwenden Sie event.key für Zeichenerkennung und event.code für physische Position (wichtig bei Spielen). Behandeln Sie sowohl keydown als auch keyup für Kombinationen. Verhindern Sie Standardverhalten vorsichtig, um die Barrierefreiheit nicht zu beeintrachtigen. Testen Sie mit verschiedenen Layouts (QWERTY, AZERTY, Dvorak) für internationale Kompatibilitat.

Sources

Examples

Ausgearbeitete Beispiele

Beispiel: Tastenkombinations-Handler erstellen

Gegeben: Strg+S (Speichern) und Escape (Modal schließen) implementieren.

Schritt 1: Drücken Sie Strg: keyCode=17, key='Control', code='ControlLeft'.

Schritt 2: Drücken Sie S: keyCode=83, key='s', code='KeyS'.

Schritt 3: Verwenden Sie die Werte: if (e.ctrlKey && e.key === 's') handleSave();

Ergebnis: Exakte Identifikatoren für beide Tastenkombinationen in Ihrem JavaScript-Code.

Beispiel: Spiel-Bewegungssteuerung

Gegeben: WASD-Tasten für Charakterbewegung in einem Browser-Spiel.

Schritt 1: Drücken Sie W: code='KeyW' — für die Vorwartsbewegung.

Schritt 2: Drücken Sie A, S, D für die jeweiligen event.code-Werte.

Schritt 3: Verwenden Sie event.code statt event.key für Layout-Unabhangigkeit.

Ergebnis: Physische Tastencodes, die auf QWERTY, AZERTY und allen Layouts funktionieren.

Anwendungsfälle

Tastenkombinations-Entwicklung

“Schlagen Sie schnell Tastencodes nach beim Erstellen von Tastenkombinationen für Webanwendungen. Ob Strg+Z zum Ruckgangigmachen, Strg+Shift+P für Befehlspaletten oder benutzerdefinierte Hotkeys — dieses Tool liefert die exakten keyCode-, event.key- und event.code-Werte. Drücken Sie einfach die Tastenkombination und kopieren Sie die Werte direkt in Ihren JavaScript-Eventhandler.”

Spielsteuerungs-Mapping

“Identifizieren Sie Tastencodes für browserbasierte Spielsteuerungen einschließlich WASD-Bewegung, Leertaste zum Springen, Shift zum Sprinten und Zifferntasten für Inventar. Die Verwendung von event.code stellt sicher, dass Steuerungen auf allen Tastaturlayouts weltweit korrekt funktionieren, was für Spiele mit internationaler Spielerbasis entscheidend ist.”

Barrierefreiheits-Tests und -Entwicklung

“Überprüfen Sie Tastencodes für barrierefreiheitskritische Tasten wie Tab, Enter, Escape, Pfeiltasten und Leertaste, die für die Tastaturnavigation in Webanwendungen essentiell sind. WCAG-Konformitat erfordert, dass alle interaktiven Elemente per Tastatur zugänglich sind. Dieses Tool hilft, die korrekten Werte für Fokusmanagement und benutzerdefinierte Widgets zu bestätigen.”

Häufig gestellte Fragen

?Wie finde ich einen JavaScript-Tastencode?

Drücken Sie einfach eine beliebige Taste, während dieses Tool aktiv ist. Es zeigt sofort keyCode, event.key, event.code und which-Werte an.

?Was ist der Unterschied zwischen keyCode und event.key?

keyCode gibt eine Ganzzahl zurück (z.B. 13 für Enter), event.key gibt einen beschreibenden String zurück ('Enter'). Modernes JavaScript bevorzugt event.key, da keyCode veraltet ist.

?Wofur wird event.code verwendet?

event.code identifiziert die physische Taste unabhängig vom Tastaturlayout. Die Taste an Position Q gibt immer 'KeyQ' zurück, egal ob QWERTY oder AZERTY.

?Ist keyCode in JavaScript veraltet?

Ja, keyCode ist technisch durch W3C zugunsten von event.key und event.code veraltet. Es bleibt jedoch von allen Browsern unterstützt.

?Funktioniert es mit allen Tastaturlayouts?

Ja, das Tool erfasst Ereignisse direkt vom Browser und funktioniert mit QWERTY, AZERTY, Dvorak und internationalen Layouts.

?Ist es kostenlos und privat?

Ja, vollständig kostenlos ohne Registrierung. Alle Erkennung erfolgt lokal — keine Tastatureingaben werden aufgezeichnet oder übertragen.

?Was ist der Tastencode für Enter?

Enter hat keyCode 13, event.key 'Enter' und event.code 'Enter'. Die Numpad-Enter-Taste hat denselben keyCode aber event.code 'NumpadEnter'.

?Wie erkenne ich Pfeiltasten in JavaScript?

Pfeiltasten haben keyCode 37 (Links), 38 (Oben), 39 (Rechts) und 40 (Unten). Mit event.key: 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'.

Hilf uns besser zu werden

Wie gefällt Ihnen dieses Tool?

Jedes Tool bei Kitmul wird auf Basis echter Nutzeranfragen gebaut. Ihre Bewertung und Ihre Vorschläge helfen uns, Bugs zu beheben, fehlende Funktionen hinzuzufügen und die Tools zu bauen, die Sie wirklich brauchen.

Empfohlene Bücher über JavaScript und Webentwicklung

Erweitern Sie Ihre Fähigkeiten

Professionelle Produkte für besseres Entwickeln

K10 Pro QMK/VIA Wireless Mechanical Keyboard, 108 Keys DE-ISO Layout Programmable Keyboard, Bluetooth/USB-C, RGB, Hot-Sw