Keyboard Event KeyCode Viewer
Usage Tips
Check whether your keyboard input is detected correctly
When you press a key, checking what the browser actually receives can help you quickly test keyboard issues or input errors. If a key is not working or a shortcut behaves differently than expected, compare the pressed key and modifier key status together.
What is Keyboard Event KeyCode Viewer?
Keyboard Event KeyCode Viewer shows real-time key, code, keyCode, which, and modifier states for debugging keyboard input.
How to Use
- 1Open the page and press keys to inspect main and detailed values.
- 2Configure keydown/keyup/repeat/default-prevent options.
- 3Use history and copy actions for debug notes.
Reference Knowledge
- ●event.key represents the actual character or key name produced by the user.
- ●event.code represents the physical key position on the keyboard.
- ●event.keyCode and event.which are legacy properties, but they are still useful when debugging older code.
- ●Modifier states such as Ctrl, Shift, Alt, and Meta help verify shortcut combinations.
FAQ
Q.How do I use the Keyboard KeyCode Viewer?
Open the page and press any key. The tool will show key, code, keyCode, which, and modifier values.
Q.What is the difference between key and code?
key is the actual character or key name, while code refers to the physical key position on the keyboard.
Q.Should I still use keyCode?
keyCode is a legacy property, but it is still useful for debugging older code or compatibility issues.
Q.Can I test shortcut combinations?
Yes. The viewer shows Ctrl, Shift, Alt, and Meta states so you can verify shortcut combinations.
Q.Does it work on mobile?
Mobile virtual keyboards may limit keyboard event data. For best results, use an external keyboard or focus the input field.