Free Online KeyCode Viewer - JavaScript Key Event Inspector

How to Use the KeyCode Viewer

1. Press Any Key: Click on the tool area and press any key on your keyboard to start
2. View Properties: All keyboard event properties will be displayed instantly, including:
   • Modern properties: key and code (recommended for new projects)
   • Legacy properties: keyCode, which, and charCode (for backward compatibility)
3. Copy Values: Click the copy button next to any property to copy its value to clipboard
4. Test Modifiers: Hold Shift, Ctrl, Alt, or Meta (Command/Windows) keys alone or in combination to see their states
5. Try Special Keys: Test arrow keys, function keys, Enter, Escape, Tab, and other special keys
6. Check Location: Press left/right modifier keys or numpad keys to see location property differences

Understanding Keyboard Event Properties

• key: (Recommended) The actual value of the key pressed (e.g., "a", "A", "Enter", "ArrowUp"). Changes based on modifier keys and keyboard layout. Use this for character input detection.
• code: (Recommended) The physical key code representing the key's position on the keyboard (e.g., "KeyA", "Digit1", "ArrowUp"). Consistent across keyboard layouts. Use this for game controls and physical key detection.
• keyCode: (Deprecated) Numeric code for the key (e.g., 65 for "A"). Inconsistent across browsers and keyboards. Avoid in new code.
• which: (Deprecated) Similar to keyCode, used for legacy browser compatibility. Avoid in new code.
• charCode: (Deprecated) Character code for keypress events only. Replaced by key property.
• location: Indicates the physical location of the key (0: standard, 1: left, 2: right, 3: numpad). Useful for distinguishing left/right modifier keys.

Best Practices for Keyboard Events

• Use event.key when you care about what character the user typed (text input, search)
• Use event.code when you care about physical key position (games, WASD controls, keyboard shortcuts)
• Avoid keyCode and which as they're deprecated and inconsistent across browsers
• Check modifier keys using event.shiftKey, event.ctrlKey, event.altKey, event.metaKey
• Use keydown for most keyboard shortcuts (fires repeatedly when held)
• Use keyup for actions that should trigger once when key is released
• Prevent default behavior with event.preventDefault() when implementing custom shortcuts

Common Use Cases

• Keyboard Shortcuts: Detect Ctrl+S, Cmd+K, etc. using code property with modifier checks
• Form Navigation: Handle Enter, Tab, Escape keys using key property
• Game Controls: Use code property for WASD, arrow keys, and action buttons
• Accessibility: Implement keyboard navigation for screen reader users
• Text Editors: Build custom text editing features with precise key detection