Confused by Keyboard Events? Here's a Great Resource

Confused by Keyboard Events? Here's a Great Resource


keydown, keypress, keyup, keyCode, charCode, which… it’s enough to make your head spin.

I just stumbled across a really useful resource from W3C that shows exactly which keyboard events are firing and all of their property values as you’re typing on your keyboard.

W3C Keyboard Event Viewer

It’s even more interesting for those who use input method editors or need to consider them in their development process, because it also shows how that effects the events fired. I’d never even heard of composition events before. It turns out compositionstart fires when you start entering text with an IME, compositionupdate fires when the entered text changes but before “committing” it to the input field, and compositionend fires when you “commit” it by pressing Space, Enter, removing focus from the input field, etc.