Free2BoxFree2Box

Keycode- / Ereignis-Viewer

Drücken Sie eine beliebige Taste, um den JavaScript-Keycode, Tastennamen und Ereigniseigenschaften anzuzeigen

Beliebige Taste drücken...

Beliebige Taste drücken...

Tastenverlauf
Your key presses will be recorded here
No keys pressed yet

Anleitung

1

Werkzeug öffnen

Keine Einrichtung nötig — das Werkzeug lädt sofort in Ihrem Browser.

2

Interagieren und Erkunden

Nutzen Sie Maus, Tastatur oder Touch für Echtzeit-Interaktion.

3

Jederzeit und überall nutzen

Funktioniert auf Desktop und Mobilgeräten — üben oder erstellen Sie unterwegs.

Warum dieses Werkzeug nutzen

100 % Kostenlos

Keine versteckten Kosten, keine Premium-Stufen — jede Funktion ist kostenlos.

Keine Installation

Läuft vollständig in Ihrem Browser. Keine Software zum Herunterladen oder Installieren.

Privat & Sicher

Ihre Daten verlassen niemals Ihr Gerät. Nichts wird auf einen Server hochgeladen.

Funktioniert auf Mobilgeräten

Vollständig responsiv — nutzbar auf Smartphone, Tablet oder Desktop.

JavaScript Keyboard Events: KeyCodes, Keys, and Codes

Key Takeaways

  • The deprecated keyCode property has been replaced by the modern key (character value) and code (physical key) properties.
  • Understanding the difference between key and code is essential for building keyboard shortcuts and games that work across keyboard layouts.
  • All keyboard event detection happens in your browser — no keystrokes are recorded or transmitted.

Keyboard event handling is fundamental to interactive web applications — from keyboard shortcuts and form validation to games and accessibility features. JavaScript keyboard events have evolved significantly, with the deprecated keyCode property being replaced by the more intuitive key and code properties. Understanding these properties and their differences is essential for building robust keyboard interactions.

The key and code properties are supported in 97%+ of global browsers, making keyCode truly obsolete.

Browser Support

Key Concepts

1

key vs. code Properties

event.key represents the character value ('a', 'A', 'Enter', 'ArrowUp'). event.code represents the physical key ('KeyA', 'ShiftLeft', 'Digit1'). Use key for text input and code for keyboard shortcuts.

2

Event Types: keydown, keyup, keypress

keydown fires when a key is pressed (repeats while held). keyup fires when released. keypress is deprecated. Use keydown for most interactions and keyup for detecting when modifier keys are released.

3

Modifier Keys

event.ctrlKey, event.shiftKey, event.altKey, and event.metaKey (Cmd on Mac) are boolean properties that indicate which modifier keys were held during the event. Use them for keyboard shortcut combinations.

4

Layout-Independent Keycodes

event.code always refers to the physical key position regardless of keyboard layout. 'KeyA' is always the leftmost home-row key, even on AZERTY keyboards where it types 'q'. Use code for games, key for text.

Pro Tips

Use event.key for accessibility — screen readers and assistive technologies rely on semantic key values, not physical positions.

Always handle both Ctrl (Windows/Linux) and Meta/Cmd (Mac) for cross-platform keyboard shortcuts.

Call event.preventDefault() to stop default browser behavior for keyboard shortcuts (like Ctrl+S) but be careful not to break expected behaviors.

Use the 'isComposing' property to avoid interfering with IME (Input Method Editor) composition for CJK language input.

All keyboard event detection is performed entirely in your browser. No keystrokes are recorded, logged, or transmitted to any server.

Häufig gestellte Fragen