Checking for Keyboard Events in JavaScript with Cross-Browser Support

What We Used To Do — And Still Do

For years and years and years, KeyboardEvent.keyCode was the de facto solution for identifying which key was pressed when using vanilla JavaScript or jQuery. Collectively StackOverflow has over two thousand up-votes for answers which advocate using keyCode ranging in date from 2009 to 2017. In fact, keyCode is supported in all major browsers, including IE6. The thing is, however, that keyCode is now deprecated (removed) from the ECMAScript KeyboardEvent specification.

How to Follow the Spec and Support All Browsers

Use event.key first with graceful degradation to event.keyCode

var key = event.key || event.keyCode;

Other Fallback Options

The main competitor options I could find were KeyboardEvent.keyIdentifier, KeyboardEvent.detail.key, KeyboardEvent.which, and KeyboardEvent.code. The reason I don’t suggest these is that, besides code, they are all deprecated and also lack the wide support of keyCode. KeyboardEvent.which is notable as the option which jQuery leaned into and which provided the widest support when using jQuery.

Add the Event Listener

I wanted to include a complete demonstration of how to add an event listener using this method.

Prefer the use of document over window when adding event listeners.

document.addEventListener('keyup', function (event) { });
  1. Prefer the use of document over window when adding event listeners. They’re consequentially the same, but document is closer to DOM elements than window is. So, adding listeners on document prevents the window from receiving them, which keeps the window clean and uninvolved with any keypress listeners. (source)
  2. Use keyup as the trigger event for UX reasons. For most behaviors (not games), people typing expect that the key they have pressed won’t get “entered” until they release the button. That’s why you don’t want to use keydown, probably (I say probably because there are cases where you do want to listen for keydown instead). They also expect that holding down a key won’t trigger the associated action unless they’re typing (If you are intercepting and reproducing regular text entry to this degree, my advice would be to re-evaluate whether you really need to do that. You probably don’t.). That’s why you don’t want to use keypress, probably. keypress also can't be used with Alt, Shift, or Ctrl.

The Add Listener Function

if (event.defaultPrevented) {
return;
}
var key = event.key || event.keyCode;
if (key === 'Escape' || key === 'Esc' || key === 27) { }
doWhateverYouWantNowThatYourKeyWasHit();

Put It All Together

function keyListener(event) {
if (event.defaultPrevented) {
return;
}

var key = event.key || event.keyCode;

if (key === 'Escape' || key === 'Esc' || key === 27) {
doWhateverYouWantNowThatYourKeyWasHit();
}
}
document.addEventListener('keyup', keyListener);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store