JavaScript-KeyCode ermitteln
Drücken Sie eine beliebige Taste, um ihre Werte für keyCode, key, code und which zu erhalten
Tastatureingaben erfassen
Hier fokussieren und eine Taste drücken
Tastaturereignisse werden nur in diesem Bereich erfasst. Tab erfasst die Taste und verschiebt den Fokus zum nächsten Bedienelement.
Verwenden Sie eine physische Tastatur, um vollständige Tastaturereignisse zu erfassen. Bei Bildschirmtastaturen auf Mobilgeräten können einige Eigenschaften fehlen.
Letzte Tastendrücke
Ihre letzten 10 Tastendrücke erscheinen hier.
Details zum Tastaturereignis
event.keyevent.codeevent.keyCodeVeraltetevent.whichVeraltetevent.locationevent.repeatModifikatortasten
Fokussieren Sie den Erfassungsbereich, um ein Tastaturereignis zu untersuchen.
Über den JavaScript-KeyCode-Finder
Der JavaScript-KeyCode-Finder ist ein kostenloses, interaktives Entwicklertool, das beim Drücken einer beliebigen Taste sofort alle Eigenschaften des Tastaturereignisses anzeigt. Ob Sie Tastenkürzel, Spielsteuerungen oder eine barrierefreie Navigation entwickeln: Die genauen Werte von event.key, event.code, event.keyCode und event.which zu kennen, ist entscheidend für zuverlässiges, browserübergreifendes JavaScript.
Moderne Webanwendungen setzen stark auf Tastaturereignis-Behandlung, von der Formularvalidierung bis zu Echtzeit-Kollaborationstools. Dieses KeyCode-Abfragetool beseitigt das Raten: Es zeigt den physischen Tastencode, den logischen Tastenwert, die Positionskennung und alle Modifikatorzustände (Shift, Strg, Alt, Meta) in dem Moment an, in dem eine Taste gedrückt wird, direkt im Browser und ohne jede Einrichtung.
Anders als statische KeyCode-Referenztabellen erfasst dieser Live-Tester für JavaScript-Tastaturereignisse echte Browserereignisse, sodass Sie das Verhalten auf verschiedenen Betriebssystemen und Tastaturlayouts überprüfen können. Außerdem markiert er deutlich, welche Eigenschaften veraltet sind, und hilft Ihnen so, zukunftssicheren Code nach den aktuellen W3C-Standards für Tastaturereignisse zu schreiben.
Hauptfunktionen
- Echtzeitanzeige von
event.key,event.code,event.keyCode,event.whichundevent.location - Visuelle Modifikatortasten-Anzeigen für die Zustände von Shift, Strg, Alt und Meta
- Hinweise auf veraltete Eigenschaften wie keyCode und which
- Kopieren mit einem Klick für jeden einzelnen Eigenschaftswert
- Alle Tastendaten als formatiertes JSON-Objekt exportieren
- Verlaufstabelle mit Ihren letzten 10 Tastendrücken zum Vergleichen
- Unterscheidet automatisch zwischen linken, rechten und Ziffernblock-Tasten
- Visuelle Tastendarstellung zur einfachen Identifizierung
- Funktioniert mit jeder Taste, auch Funktionstasten, Pfeiltasten und Sonderzeichen
- Vollständig responsives Design mit Unterstützung für den Dunkelmodus
So verwenden Sie den JavaScript-KeyCode-Finder
- Eingabebereich fokussieren: Klicken Sie irgendwo in die gestrichelte Tastendruckzone oben im Tool, um die Tastaturerfassung zu aktivieren.
- Beliebige Taste drücken: Drücken Sie eine beliebige Taste auf Ihrer Tastatur, und alle Ereigniseigenschaften erscheinen sofort im Eigenschaftsraster darunter.
- Modifikatorzustände prüfen: Anhand der Anzeigen für Shift, Strg, Alt und Meta sehen Sie, welche Modifikatoren beim Tastendruck aktiv waren.
- Werte kopieren: Klicken Sie auf das Kopiersymbol neben einer Eigenschaft, um ihren Wert zu kopieren, oder exportieren Sie mit der Schaltfläche "Alles als JSON kopieren" alle Eigenschaften auf einmal.
- Tasten vergleichen: Drücken Sie nacheinander mehrere Tasten und scrollen Sie zur Verlaufstabelle, um deren Codes nebeneinander zu vergleichen.
- Zurücksetzen und wiederholen: Mit der Schaltfläche "Löschen" setzen Sie alle Daten zurück und starten eine neue Testsitzung.
Anwendungsfälle
- Entwicklung von Tastenkürzeln: Ermitteln Sie die richtigen key- und code-Werte, um eigene Tastenkürzel in Webanwendungen umzusetzen.
- Spielsteuerung: Ordnen Sie physische Tasten Spielaktionen zu, indem Sie event.code für layoutunabhängige Tastenbelegungen prüfen.
- Barrierefreiheitstests: Prüfen Sie, ob die Tastaturnavigation korrekt funktioniert und alle interaktiven Elemente auf die erwarteten Tasten reagieren.
- Migration von Altcode: Finden Sie moderne event.key-Entsprechungen für veraltete event.keyCode-Werte aus älteren Projekten.
- Browserübergreifendes Debugging: Bestätigen Sie, dass Tastenereignisse in Chrome, Firefox, Safari und Edge konsistente Werte liefern.
- Validierung von Eingabeformularen: Ermitteln Sie exakte Tastenwerte, um bestimmte Zeichen in Textfeldern zu erlauben oder zu sperren.
- Tutorials und Dokumentation schreiben: Schlagen Sie schnell korrekte KeyCode-Daten nach, die Sie in Entwicklerleitfäden und Referenzmaterial übernehmen.
- Ziffernblock und Haupttastatur unterscheiden: Mit der location-Eigenschaft trennen Sie Ziffernblock-Tasten von den normalen Zifferntasten.
Häufig gestellte Fragen
Was ist der Unterschied zwischen event.key und event.code?
event.key liefert den logischen Wert der Taste (z. B. "a" oder "A", je nach Shift), während event.code die physische Taste auf der Tastatur liefert (z. B. "KeyA"), unabhängig von Modifikatoren oder Tastaturlayout. Verwenden Sie event.key für Zeicheneingaben und event.code für positionsbasierte Tastenkürzel.
Ist event.keyCode noch sicher verwendbar?
event.keyCode ist vom W3C offiziell als veraltet eingestuft und kann sich in verschiedenen Browsern uneinheitlich verhalten. Verwenden Sie in neuen Projekten event.key oder event.code. Viele ältere Codebasen verlassen sich allerdings noch auf keyCode, deshalb zeigt dieses Tool den Wert als Referenz zur Abwärtskompatibilität an.
Warum ist das Feld location wichtig?
Die Eigenschaft event.location unterscheidet Tasten, die an mehreren Stellen einer Tastatur vorkommen, etwa linke und rechte Shift-Taste oder Zahlenreihe und Ziffernblock. Das ist entscheidend für Anwendungen, die doppelt vorhandene Tasten auseinanderhalten müssen.
Ist dieses Tool kostenlos?
Ja, der JavaScript-KeyCode-Finder ist vollständig kostenlos, ohne Anmeldung, ohne Nutzungslimits und ohne versteckte Gebühren. Sie können ihn so oft verwenden, wie Sie es für Entwicklung und Tests brauchen.
Sind meine Daten sicher?
Ja, absolut. Die gesamte Tastenerkennung läuft ausschließlich in Ihrem Browser mit nativen JavaScript-Tastaturereignissen. Tastenanschläge oder Ereignisdaten werden nie an einen Server gesendet. Ihre Eingaben bleiben vollständig privat auf Ihrem Gerät.
Funktioniert das auf Mobilgeräten?
Das Tool funktioniert am besten mit einer physischen Tastatur. Auf Mobilgeräten löst die Bildschirmtastatur möglicherweise nicht alle Ereigniseigenschaften einheitlich aus. Für verlässliche Ergebnisse verwenden Sie einen Desktop- oder Laptop-Computer oder schließen eine externe Tastatur an Ihr Mobilgerät an.
Tipps und bewährte Vorgehensweisen
- event.key für Zeicheneingaben bevorzugen: Der Wert berücksichtigt Tastaturlayout, Sprache und Modifikatorzustand automatisch.
- event.code für Spielsteuerung verwenden: Die physischen Tastenpositionen bleiben unabhängig vom Tastaturlayout des Nutzers gleich (QWERTY, AZERTY, Dvorak).
- Modifikatorkombinationen immer testen: Drücken Sie Strg+Shift+Taste oder Alt+Taste, um zu bestätigen, dass Ihre Listener für Tastenkürzel die richtige Kombination erfassen.
- Verlaufstabelle auf Muster prüfen: Der Vergleich mehrerer Tastendrücke hilft, Unstimmigkeiten zu erkennen oder die passenden Codes schneller zu finden.
- JSON für die Dokumentation exportieren: Mit "Alles als JSON kopieren" fügen Sie exakte Tastendaten direkt in Codekommentare oder Entwicklerdokumentation ein.
- Browserübergreifend testen: Die Werte von Tastenereignissen können sich zwischen Browsern unterscheiden, besonders bei Sondertasten. Prüfen Sie immer Ihre Zielbrowser.