How to Create Custom Keyboard Shortcuts using JavaScript

Do you want to spice up your website by adding your own custom keyboard shortcuts? If yes, then this is the post for you.

Photo by Markus Petritz on Unsplash

To add custom keyboard shortcuts, you will have to keep track of the clicked-on keyboard keys to track down when a desired combination is clicked.

The steps to achieve this are pretty simple.

1) Keep track of clicked keys

That is done by saving the clicked status for each key. This means setting the status to true when a key is clicked down and setting it to false false on the release of the key.

In order to achieve this in code, we first must create a boolean reference to help us track whether the key is clicked or not. However, it would be a little too much to create a variable for each key. For that reason, an object is created with a property for each key code that you want to track down. A key code is usually the ASCII code.

In this example, we want to track the custom shortcut a + b. The following is the object created to track those two key codes.

isKeyPressed = { 
   'a': false, // ASCII code for 'a'
   'b': false, // ASCII code for 'b'
    // ... Other key codes you want to track
}

Now, we want these boolean values that correspond to the key codes to be accurate. This means that when a key is clicked down, it’s value will be true and when the key is released, it’s value will be false. Javascript offers two event handlers that make this easy for us, which are the keyup and keydown events.

According to MDN web docs, the keyup and keydown events are defined as the following:

The keydown event is fired when a key is pressed and the keyup event is fired when a key is released.

The following code demonstrates setting the click status of the keys accurately to reflect it’s actual status.

document.onkeydown = (keyDownEvent) => {   
    isKeyPressed[keyDownEvent.key] = true;  
}
document.onkeyup = (keyUpEvent) => {
    isKeyPressed[keyDownEvent.key] = false;
};

Also, note that executing the following code, that is in both of the event handlers, will add the key code to the object if it’s not in it already.

So, why were the two key codes added to the object when it was initialized? That is because we know we want to check their click status at some point, so we need the reference to those two keys to be defined.

isKeyPressed[key] = booleanVal;

2) Avoid keeping track of the ctrl key, the shift key and the alt key

That is because whether they are clicked on or not is information that can be extracted from the key event directly, through keydownEvent.ctrlKey, keydownEvent.shiftKey and keydownEvent.altKey.

3) Check whether the desired custom shortcut is clicked

This is checked during the keydown event, as the keydown event is the only place where your custom shortcut might be clicked.

This is achieved by a simple logical condition checking the desired key combination’s click status known from the object that keeps track of whether a key is clicked or not. The following code demonstrates checking whether the a + b key combination is clicked or not.

document.onkeydown = (keyDownEvent) => { 
 
isKeyPressed[keyDownEvent.key] = true;
if (isKeyPressed["a"] && isKeyPressed["b"]) {
//do something as custom shortcut (a & b) is clicked
};

Finally, keep in mind that…

• Events should be on the document if global shortcuts are desired to be caught.
• If shortcuts are desired to be caught within a particular block/area rather than across the entire document, then the keydown and keyup events should be on that block or element.
• Events on an element will catch all keydown and keyup events within that element, including events fired from children elements. So, even if children have event listeners, if the parent has the same one then the same event will be fired at both the child listener and the parent listener.
• Use preventDefault() function in the listeners to prevent the default actions of the clicked key(s) when it’s not desired.
• keyCode attribute on the key event should be avoided as MDN web docs considers it a deprecated attribute. Therefore, the key attribute is used instead.

The following code demonstrates the full solution for creating a custom keyboard shortcut using Javascript.

Code Demo

This code demo demonstrates the creation of custom keyboard shortcuts using JavaScript in an actual web page. The demo demonstrates the a + b example introduced in this post.

You can also clone the project from my Github here.