JavaScript-Tastencode-Finder

Funktionsweise

1. Eine Taste drücken: Klicken Sie in den Eingabebereich und drücken Sie eine beliebige Taste auf Ihrer Tastatur, Buchstaben, Zahlen, Funktionstasten, Pfeile, Modifier oder Sondertasten.
2. Tastencodes ablesen: Das Tool zeigt sofort die Werte event.key, event.code, event.keyCode (Legacy) und charCode der Taste an.
3. In Ihrem Code verwenden: Kopieren Sie die exakten Werte, die Sie für Ihre Tastatur-Event-Listener oder Tastenkürzel-Implementierungen benötigen.

Warum den Keycode-Finder verwenden?

JavaScript-Tastatur-Events legen mehrere verschiedene Eigenschaften offen (key, code, keyCode, charCode und which) und zu wissen, welche zu verwenden ist und welcher Wert verglichen werden soll, ist immer wieder knifflig. Der Keycode-Finder beseitigt das Rätselraten, indem Sie eine Taste drücken und sofort alle Event-Eigenschaften sehen können. Das ist unschätzbar wertvoll für den Bau von Tastenkürzeln, das Behandeln von Sondertasten, die Implementierung von Hotkeys und das Debuggen von Tastatur-Event-Listenern.

Funktionen

• Alle Event-Eigenschaften: Zeigt event.key, event.code, event.keyCode, event.which und event.charCode für jeden Tastendruck.
• Modifier-Tasten-Erkennung: Zeigt an, ob Shift, Strg, Alt und Meta beim Tastendruck gehalten wurden.
• Sondertasten-Unterstützung: Funktioniert mit Funktionstasten (F1–F12), Pfeiltasten, Enter, Escape, Tab, Backspace und allen anderen Sondertasten.
• Tastenverlauf: Führt ein Protokoll der letzten Tastendrücke, sodass Sie mehrere Tasten vergleichen können.
• Werte kopieren: Klicken Sie auf einen beliebigen Wert, um ihn direkt in Ihre Zwischenablage zu kopieren.

Häufig gestellte Fragen

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

event.key ist der moderne Standard, er liefert einen lesbaren String wie „ArrowLeft" oder „Enter". event.keyCode ist ein veralteter numerischer Code (deprecated, aber noch unterstützt). Verwenden Sie event.key für neuen Code; verwenden Sie event.keyCode, wenn Sie ältere Browser-Kompatibilität pflegen.

Wie erkenne ich Strg+S oder andere Tastenkombinationen?

Tastenkombinationen verwenden event.key kombiniert mit Modifier-Prüfungen: if (event.ctrlKey && event.key === "s"). Drücken Sie Strg+S in diesem Tool, um alle Werte zu sehen, und replizieren Sie die exakte Bedingung in Ihrem Event-Listener.

Warum zeigen einige Tasten denselben keyCode?

keyCode-Werte waren nicht standardisiert und einige Tasten teilen sich Codes je nach Kontext. event.code ist zuverlässiger, es identifiziert die physische Tastenposition (z. B. „KeyA") unabhängig vom Tastaturlayout, während event.key das Zeichen widerspiegelt, das diese Taste erzeugt.

30 Jahre Geschichte der Tastaturereignisse in JavaScript

Tastaturereignisse haben eine notorisch chaotische Geschichte im DOM. Netscape Navigator 2 (1995) führte die ursprünglichen onkeydown-, onkeypress- und onkeyup-Handler mit einer numerischen keyCode-Eigenschaft ein, die keine Spezifikation hatte; jeder Browser erfand seine eigenen Werte. Internet Explorer 4 (1997) implementierte seine eigene Variante mit event.keyCode als einziger Eigenschaft, während Netscape bei event.which blieb. DOM Level 2 Events (W3C, November 2000) standardisierte den Ereignisfluss (Capture/Bubble), ließ Tastaturereignisse aber explizit außen vor, weil sich die Hersteller nicht einigen konnten. Das Ergebnis: Entwickler schrieben über ein Jahrzehnt lang Code wie e.keyCode || e.which. DOM Level 3 Events (W3C Working Draft 2003, Recommendation 2018) führte schließlich das moderne event.key (Unicode-Zeichen oder benannte Taste wie «ArrowLeft») und event.code (physische Tastenposition wie «KeyA», unabhängig vom Layout) ein, zusammen mit der Veraltung von keyCode, charCode und which. Die UI Events-Spezifikation (W3C, laufend) ist die moderne Heimat dieser Arbeit. Browser zogen allmählich nach: Chrome 51 (Mai 2016), Firefox 47 (Juni 2016), Safari 10.1 (März 2017) lieferten alle event.code-Unterstützung. Das veraltete keypress-Ereignis ist zugunsten der beforeinput- und input-Ereignisse veraltet.

Die 5 Eigenschaften, entschlüsselt

• event.key (modern, dieses verwenden). Das produzierte Zeichen oder die benannte Taste. Buchstaben und Ziffern geben Ihnen das Unicode-Zeichen unter Berücksichtigung von Modifikatoren und Layout (Shift+a = «A», AZERTY Q-Position = «a»). Benannte Tasten sind Zeichenfolgen wie «Enter», «Escape», «ArrowLeft», «F5», «Control». Definiert in UI Events.
• event.code (modern, für Spiele verwenden). Identifiziert die physische Taste auf der Tastatur, unabhängig von Layout oder Modifikatoren. Beispiele: «KeyA», «Digit1», «ArrowUp», «ShiftLeft», «MetaLeft». Verwenden Sie dies für WASD-Bewegung, vim-ähnliche Navigation und Shortcuts, die das Tastaturlayout ignorieren sollen.
• event.keyCode (veraltet). Numerischer Code. 13 = Enter, 27 = Escape, 32 = Leertaste, 37-40 = Pfeil Links/Hoch/Rechts/Runter, 65-90 = A-Z, 112-123 = F1-F12. Werte wurden nie standardisiert, wurden nur durch Konvergenz zwischen Browsern konsistent. In neuem Code vermeiden.
• event.which (veraltet). Netscapes Äquivalent zu keyCode. Für die meisten druckbaren Zeichen und nicht-druckbaren Tasten identisch zu keyCode. Das alte Polyfill e.keyCode || e.which behandelte Fälle, in denen eines 0 war.
• event.charCode (veraltet, nur bei keypress). Der Unicode-Codepunkt des Zeichens. 97 für «a», 65 für «A». Wird nur bei keypress ausgelöst (was selbst veraltet ist). Die input- und beforeinput-Ereignisse sind die modernen Ersatzformen.
• Modifikator-Booleans. event.shiftKey, event.ctrlKey, event.altKey, event.metaKey (Command auf macOS, Windows-Taste auf Windows). Überprüfen Sie Modifikatoren immer explizit: e.metaKey || e.ctrlKey für plattformübergreifendes «Speichern» (Cmd+S auf Mac, Ctrl+S auf Windows/Linux).
• event.location. Unterscheidet links vs rechts Modifikatoren und den Ziffernblock. 0=Standard, 1=linker Modifikator, 2=rechter Modifikator, 3=Ziffernblock. Nützlich zur Unterscheidung von Links-Shift vs Rechts-Shift für Spiel-Layouts.

Wo Keycode-Suche wirklich wichtig ist

• Anwendungs-Tastenkombinationen. Cmd/Ctrl+S zum Speichern, Cmd/Ctrl+Z zum Rückgängigmachen, Cmd/Ctrl+K zum Öffnen der Befehlspalette (Slack, Linear, GitHub, Notion verwenden dies alle seit etwa 2020). Verwenden Sie immer event.key für die druckbare Taste und einen Modifikator-Boolean für die Meta-Taste.
• Befehlspalette und Fuzzy Finder. Das von Slack (2014) und Linear (2019) populär gemachte Cmd+K-Muster. Hören Sie global auf den Öffnungs-Shortcut, dann behandeln Sie ArrowUp/ArrowDown-Navigation, Enter zum Auswählen, Escape zum Schließen.
• Browserspiele und HTML5-Spielentwicklung. Phaser, Babylon.js, Three.js. Verwenden Sie immer event.code für Bewegungstasten, damit WASD auf AZERTY-Tastaturen funktioniert (wo «W» an der «Z»-Position liegt). Sebastian Lague, Notch (frühes Minecraft-Prototyp) und itch.io-Spiele sind alle in diese AZERTY-Falle getreten.
• Barrierefreiheitsmuster. Modaldialoge benötigen Escape zum Schließen. Combobox-Widgets benötigen ArrowDown/ArrowUp/Enter/Escape. Tooltips müssen auf Escape geschlossen werden. Der WAI-ARIA Authoring Practices Guide definiert Tastatur-Interaktionsmuster für jedes übliche Widget; event.key ist der Standard für diese Prüfungen.
• Implementierung von Text- und Code-Editoren. Monaco (der VS Code-Editor im Browser), CodeMirror, ProseMirror, Lexical bilden alle Tastaturereignisse auf Befehle ab. Sie verwenden event.code für vim/emacs-ähnliche Tastenbelegungen, die nicht vom Layout abhängen.
• Formular-UX-Verbesserungen. Mit Enter absenden, mit Escape den Fokus verlieren, mit Tab den Fokus weiterleiten. Üblich in Checkout-Flows, Suchleisten, Autocomplete-Feldern.
• Browser-Erweiterung-Hotkeys. Vimium, SurfingKeys, Tridactyl bieten Tastaturnavigation für das gesamte Web. Sie hören auf Dokumentenebene und behandeln komplexe modale Tastensequenzen (gg = zum Anfang gehen, wie vim).

Häufige Fehler bei der Behandlung von Tastaturereignissen

• Verwendung von keyCode in neuem Code. Veraltet seit DOM Level 3 (2018), historisch inkonsistent zwischen Browsern und bricht bei Nicht-US-Layouts (das Komma hat keyCode 188 auf US, 191 auf einigen deutschen Tastaturen). Verwenden Sie stattdessen event.key.
• Hartcodierung von e.key === "w" für Spielbewegung. Auf AZERTY (französischen) Tastaturen tippt die physische W-Taste «z». Spieler greifen nach dem, was sie als WASD-Cluster erinnern, erhalten aber die falsche Eingabe. Verwenden Sie stattdessen event.code === "KeyW", das die physische Position identifiziert.
• Nur ctrlKey für «Speichern» prüfen. Auf macOS ist Cmd+S die Konvention; ctrlKey ist falsch, aber metaKey ist wahr. Prüfen Sie immer beides: (e.metaKey || e.ctrlKey) && e.key === "s".
• Vergessen von preventDefault bei browser-reservierten Shortcuts. Cmd+S ohne preventDefault zu hijacken löst immer noch Seite speichern unter aus. Dasselbe für Cmd+P (drucken), Ctrl+F (Browser-Suche), Ctrl+N (neues Fenster, kann sowieso nicht blockiert werden), Ctrl+Tab (Chrome lässt Sie nicht). Rufen Sie e.preventDefault() im Handler auf.
• Ignorieren der IME-Komposition. Japanische, chinesische, koreanische Eingabemethoden (IME) lösen keydown-Ereignisse aus, während der Benutzer Zeichen komponiert. Prüfen Sie e.isComposing oder verwenden Sie das compositionend-Ereignis, bevor Sie Ihren Shortcut-Handler auslösen. Slack hat dies bekanntermaßen für japanische Benutzer 2017 vermasselt.
• Verwendung des veralteten keypress-Ereignisses. Wird nur für zeichenproduzierende Tasten ausgelöst (nicht Pfeiltasten, Funktionstasten usw.). Veraltet; verwenden Sie keydown für Shortcuts und input/beforeinput für Textänderungen.
• Auslösen von Shortcuts bei jeder Wiederholung. Eine Taste gedrückt zu halten löst wiederholt keydown-Ereignisse aus. Für Toggle-Aktionen (Palette öffnen, Tab wechseln) prüfen Sie e.repeat und brechen Sie früh ab, um zu vermeiden, 30 «Öffnen»-Befehle zu registrieren, wenn der Benutzer versehentlich die Taste hielt.

Weitere häufig gestellte Fragen

Warum löst mein Tasten-Handler nicht aus, wenn der Benutzer eine nicht-US-Tastatur hat?

Fast immer, weil Sie event.key für ein Zeichen prüfen, das auf diesem Layout nur mit Shift existiert. Auf einer deutschen QWERTZ-Tastatur ist «/» Shift+7 (nicht seine eigene Taste); auf französischem AZERTY werden die Ziffern 0-9 mit Shift+der-Reihe-darüber getippt. Verwenden Sie event.code (physische Taste) für positionsbasierte Shortcuts oder event.key für inhaltsbasierte Shortcuts (wo Sie tatsächlich das Zeichen wollen, das der Benutzer gerade getippt hat).

Wie behandle ich Cmd+K / Ctrl+K plattformübergreifend konsistent?

Die Standard-Idiom: if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }. Auf macOS ist e.metaKey die Cmd-Taste; auf Windows/Linux ist e.ctrlKey das, was Benutzer erwarten. Akzeptieren Sie beides. Immer preventDefault, weil der Browser Cmd+K in einigen Browsern an «Adressleiste fokussieren» bindet. Fügen Sie !e.repeat hinzu, um Auslösung beim Tastenhalten zu vermeiden.

Kann JavaScript globale Tastenanschläge außerhalb der Seite erkennen?

Nein, und dies ist aus Sicherheitsgründen so konzipiert. Der Browser löst Tastaturereignisse nur für die fokussierte Seite oder das Element aus. Browser-Erweiterungen können mit breiterem Umfang über die chrome.commands-API hören. Native Apps in Electron, Tauri usw. können globale Hooks auf OS-Ebene verwenden. Bank- und 2FA-Apps verlassen sich auf diese Isolation: Ein bösartiger Tab kann Ihren Passwortmanager nicht mit Keyloggern abfangen.

Was ist der richtige Weg, um «gerade gedrückt» vs «gehalten» zu erkennen?

Für Toggles prüfen Sie !e.repeat im keydown-Handler, das erste Ereignis hat repeat: false, nachfolgende Auto-Wiederholungs-Ereignisse haben repeat: true. Für kontinuierliche Aktionen (Spielbewegung) verfolgen Sie den Tastenstatus in einem Set: hinzufügen bei keydown, entfernen bei keyup, dann in Ihrer Render-Schleife prüfen Sie keysHeld.has("KeyW"). Dies entkoppelt die Eingabe von der Framerate und behandelt mehrere gleichzeitige Tasten (bewegen + springen).

Wird etwas an einen Server gesendet, wenn ich hier Tasten drücke?

Nein. Tastenereignisse werden lokal von JavaScript erfasst und auf dieser Seite ohne Netzwerkanfrage angezeigt. Öffnen Sie den Network-Tab in DevTools, tippen Sie; Sie werden null ausgehenden Verkehr sehen. Sicher zum Testen in jedem Kontext, einschließlich dem Entdecken, was Passwörter oder sensible Shortcuts auf Ihrer Tastatur produzieren.