February 8th, 2021 × #javascript#webdev#accessibility

Hasty Treat - Keyboard Events Are Surprisingly Interesting

Scott and Wes provide an in-depth look at keyboard events in the browser, explaining the different events that fire, metadata available, and best practices for using keyboard shortcuts in web apps.


In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them!

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

03:04 - The Events

08:02 - Event meta data

 "key": "c",
 "keyCode": 67,
 "which": 67,
 "code": "KeyC",
 "location": 0,
 "altKey": false,
 "ctrlKey": false,
 "metaKey": true,
 "shiftKey": false
  • Others:
    • .locale
    • .repeat

16:46 - Media keys

18:32 - When might you use key codes?

  • Space bar to stop a video on a page
  • Building a game
  • Making a web app feel more like an app

Tweet us your tasty treats!


Play / pause the audio
Minimize / expand the player
Mute / unmute the audio
Seek backward 30 seconds
Seek forward 30 seconds
Increase playback rate
Decrease playback rate
Show / hide this window