JavaScript keyboard events help you capture user interactions with the keyboard.

Like many other JavaScript events, the KeyboardEvent interface provides all the required properties and methods for handling every keystroke a user makes using the keyboard.

There have been many articles written about how they work and how to use them. At the same time, W3.org keeps updating the specification by introducing new properties, deprecating existing ones, and marking certain code as legacy.

Because of this, it is essential for web developers to keep learning about the KeyboardEvent interface to know what exactly they should use and what's no longer relevant.

In this article, we will learn about:

• The KeyboardEvent interface.
• The keyboard event types we need to focus on.
• The keyboard event types we may not ever need.
• Which properties you need in practice and how different browsers handle them.
• What is deprecated, and what's in use.
• A playground to try things out as we learn.
• Finally, the current list of key codes for reference and future use.

Hope you enjoy it.

The KeyboardEvent interface and the event types

The KeyboardEvent interface provides information using the defined constants, properties, and a single method (as of January 2021). It extends the UIEvent interface which eventually extends the Event interface.

KeyboardEvent Hierarchy

There are primarily three keyboard event types, keydown, keypress and, keyup. We can get contextual information about these events from the KeyboardEvent interface's properties and methods.

You can add each of these event types to an HTML element or document object using the addEventListener method. Here is an example of listening to a keydown event on an element whose id is, 'type-here':

let elem = document.getElementById('type-here');

elem.addEventListener("keydown", function (event) {
    // The parameter event is of the type KeyboardEvent
      addRow(event);
});

Alternatively, you can use the handler methods like, onKeydown(event), onKeyup(event), onKeypress(event) with the element to handle keyboard events. Here is an example of handling a keyup event on an input element:

<input type="text" id="type-here" onkeyup="doSomething(event)">

If you print the event object in the browser's console, you will see all its properties and methods along with the ones it inherits from the UIEvent and Event interfaces.

I have pressed the key, a while handling the keyup event

Try This Interactive Keyboard Event Playground

Before we go any further, how about a playground to explore all the keyboard events, their properties, characteristics, and so on? I think it will be awesome to use it alongside this article and beyond.

Just focus your cursor anywhere in the app embedded below, and type any key to see the contextual information about it.

You can also filter out the events you want by unchecking the checkboxes at the top. So give it a try:

If you have any issues in accessing the playground above, you can access this tool directly here: https://keyevents.netlify.app/

And you can find the source code of the demo from here: https://github.com/atapas/js-keyevents-demo

keydown, keypress, keyup - which one should you use?

The keyboard events are:

• keydown: It fires when any key is pressed down.
• keypress: It fires only when a key that produces a character value is pressed down. For example, if you press the key a, this event will fire as the key a produces a character value of 97. On the other hand, this event will not fire when you press the shift key as it doesn't produce a character value.
• keyup: It fires when any key is released.

If all three events are attached to a DOM element, the firing order would be:

1. First, keydown
2. Next, keypress (with the condition stated above)
3. Last, keyup

Among these events, the most used Keyboard event is (or, should be) keydown because:

• The keydown event has the maximum coverage of keys to produce the contextual information. The keypress event works only for a subset of the keys. You can't capture the Alt, Ctrl, Shift, Meta, and other similar key events with a keypress. This also means that we can not fire the keypress event with key combinations like Ctrl Z, Shift Tab, and so on.
• Moreover, the keypress event has been deprecated. This is a big enough reason to avoid it.
• While both keydown and keyup events cover all the keys and are well supported by most browsers, there are a few differences that push keydown ahead of keyup. The keydown event fires before the browser processes the key, whereas the keyup event fires after the browser processes the key. If you cancel a keydown event (say, using event.preventDefault()), the browser's action will be canceled too. In case of the keyup event, the browser's action will not be canceled even when you have canceled the event.

In the example below, we are using event.preventDefault() when a keydown or keyup event fires. The bowser's action to write the key characters into the textbox will not be performed in the case of keydown but it will continue to happen for keyup.

With all that explanation, the keydown event is a clear winner and should become the most popular (used) key event type.

How to use the KeyboardEvent properties in practice

This is the billion dollar question! The shortest answer is, it depends. But on what? It depends on:

• The browser support for your application
• How legacy is your application code is and how much are you willing to refactor?

But before we get there, let's see a preview of some of the the useful properties and methods of the KeyboardEvent interface.

The last three properties are deprecated and you should use the key property instead. The key property has the widest browser support.

It is supported on:

• Microsoft Edge: Version >= 79
• Firefox: Version >= 29
• Google Chrome: Version >= 51
• Safari: Version >= 10.1

So as long as you are not using any of the older browsers, the event.key property should be enough for you to identify a key. In case you have to support an older browser, a better fallback would be the event.which property.

window.addEventListener("keydown", function (event) {

  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key
  } else if (event.which !== undefined) {
    // Handle the event with KeyboardEvent.which
  }
});

If your code uses any of the deprecated properties and you have an opportunity to refactor that code, it is always better to go for it.

Modifier Keys

The modifier keys are the special keys on your keyboard that modify the default behavior of the other keys. Control, Shift, and Alt are some modifier keys. When a modifier key is combined with another key, you can expect a different action to occur.

For example, if you press the key z, it is supposed to return the key and code for the letter z. If you combine it with the modifier Control and press Control z, you will likely get an Undo operation. Let's see it with some more examples in the next section.

The properties, event.altKey, event.ctrlKey, event.shiftKey, and so on help detect if a modifier key has been pressed.

Key Combinations

We can combine multiple keys and perform actions based on the key combinations. The code snippet below shows how to combine the Control and z key to define an action:

document
  .getElementById("to_focus")
  .addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "z") {
      // Do Something, may be an 'Undo' operation
    }
});

Here is another example that demos a few more key combinations. Please give it a try:

A Full List of Key Event Values

The table below shows a list of keys with the event.which, event.key and event.code values.

Please Note:

• event.which has been deprecated(or outdated)
• The event.code value is the same for small letters(a) and capital letters(A). Hoever the event.key value represents the actual letter.
• The event.which value is different in Firefox(FF) and other browsers for the keys, equal(=), semicolon(;), and dash/minus(-)

How about the Virtual Keyboard?

So what about virtual keyboards, like using our mobile phones or tablets or any other input devices?

The specification says that if the virtual keyboard has a similar key layout and functionality to a standard keyboard, then it must result in an appropriate code attribute. Otherwise, it is not going to return the right value.

In Summary

To Summarize:

• You can use the KeyboardEvent to capture user interactions using a Keyboard.
• There are primarily three key events, keydown, keypress, and keyup.
• We should use the keydown event type as much as possible as it satisfies most of the use-cases.
• The keypress event type has been deprecated.
• The event.which property has been deprecated. Use event.key wherever possible.
• If you have to support an older browser, use appropriate fallback for key detection.
• We can combine multiple keys and perform operations.
• The virtual keyboard supports these events as long as the layout and functions are similar to the standard keyboard.

That's all for now. Thank you for reading this far! Let's connect. You can @ me on Twitter (@tapasadhikary) with comments or feel free to follow.

From https://giphy.com/