Keyboard button clicks with Space and Enter behave differently

Written by Stefan Judis
Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

Whenever you add a JavaScript click handler to DOM elements other than the good old button, you should hold on and ask yourself if you're using the correct element. Semantic HTML provides additional functionality to assistive technology and is usually more accessible than clickable div soup.

For example, buttons come with keyboard accessibility features built-in. They're focusable and can be clicked by pressing Enter or Space.

But did you know that the two keys click buttons differently?

  • Enter clicks a focused button on keydown
  • Space clicks a focused button on keyup

I found this little fun fact on Adrian's blog. Check out the post to learn more and see this click behavior in action.

A control panel including a button followed by statistics showing how often it was clicked via Enter and Space.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.