Javascript Keyboard events are much simpler than you think

Here’s a question for you:
Let’s say you have a search box. You want to detect when the user presses the “Enter” key, and trigger a search query on that event. How would you implement it?

If you have some experience with web development and Javascript, you would immediately think of using a keyboard event such as keypress, keydown or keyup.

According to one of the highest rated answers on StackOverflow, here’s how your event handler would look like:

$(selector).on("keydown", function(e) {
  var code = e.keyCode || e.which;
  if(code == 13) { 
     // Do something
  }
});

I don’t like this code for multiple reasons. First, I don’t know what code 13 stands for when I look at it. Sure, I can look it up on internet or I can document it in comments. Either way, the code itself doesn’t convey its purpose.

Second, I don’t know why I have to perform e.keyCode || e.which before I can compare the value. Plus these attributes have long been deprecated by the standards.

Third, it is not simple to extend this behavior. For example, if I need to add a different logic for handling “tab” key, I would again have to lookup its key code.

I recently learned that over the years, the event properties have become much simpler. Here’s how you could handle the same event in a modern browser:

$(selector).on("keydown", function(e) {
  if(e.key === "Enter") { 
     // Do something
  }
});

That looks much better to me. You can readily see that there is some logic that runs when the user presses the “Enter” key!

Notice that we are no longer comparing the event.which or event.keyCode properties, but we are using event.key. A key difference (no pun intended) between these properties is that which and keyCode represent “a system and implementation dependent code identifying the pressed key” — not the actual string representation of the key itself. Meaning, “Enter” is 13, “Tab” is 9, “Escape” is 27, “5” is 53, and so on.

On the other hand, event.key property carries printed representation of the key (or a human readable representation of keys which cannot be printed — for example “Enter” or “CapsLock”).

So the value of event.key is “1” when you press “1” on the keyboard, “Enter” when you press Enter key and “Control” when you press the control key! You don’t have to remember the key codes anymore, and your code is significantly more readable.

In case you are curious about event.key, you can read more about it here.

What happens when you need to extend this handler to do something else on “tab” key?

$(selector).on("keydown", function(e) {
  if(e.key === "Enter") { 
     // Do something
  } else if(e.key === "Tab") {
     // Do something else
  }
});

I couldn’t imagine anything simpler!

So the next question is, which browsers support this event.key property?

Almost all! [Link]

If you can’t believe your eyes, here you go: Even IE 11 supports it!

Here’s the link to a codepen I created in case you want to try it out for yourself.

So what are you waiting for? Go ahead, change that ugly event handler you wrote last year to only allow numbers in a textbox.