Keyboard Event Tester
Press any key to see detailed information about keyboard events in JavaScript
Click here and press any key to start testing
Event Log
JavaScript Code Example
// Modern keyboard event handling document.addEventListener('keydown', (event) => {
// Modern properties (recommended)
console.log('Key:', event.key);
console.log('Code:', event.code);
// Modifier key states
console.log('Ctrl:', event.ctrlKey);
console.log('Alt:', event.altKey);
console.log('Shift:', event.shiftKey);
console.log('Meta:', event.metaKey);
// Prevent default behavior
if (event.key === 's' && event.ctrlKey) {
event.preventDefault();
// Custom save action
}
})
Privacy First
- No keystrokes are recorded or transmitted
- All processing happens in your browser
- No cookies or tracking
- Works completely offline
About Keyboard Events
Keyboard events are essential for creating interactive web applications. JavaScript provides three main keyboard events: keydown, keyup, and keypress (deprecated). Understanding these events and their properties is crucial for proper keyboard handling.
event.key vs event.code
The event.key property returns the character value of the
key (e.g., "a", "A", "Enter"), while event.code returns
the physical key code regardless of keyboard layout (e.g., "KeyA",
"Enter"). Use key for character input and
code for game controls or shortcuts that should work on
any keyboard layout.
Deprecated Properties
Properties like keyCode and which are
deprecated but still widely supported for backward compatibility. New
code should use event.key and event.code
instead, which provide more consistent and predictable values across
browsers and platforms.
Event Location
The event.location property indicates where the key is
located on the keyboard: 0 (standard), 1 (left modifier), 2 (right
modifier), or 3 (numpad). This is useful for distinguishing between
left and right Shift, Ctrl, or Alt keys.