Creating Keyboard Shortcuts in JavaScript

Using Plain JavaScript
First, create an HTML file and add the necessary HTML tags to it (like html, head and body tags). In the body tag of the page add following content.

<h3>Press M key on keyboard(Single key)</h3>
<h3>Press Ctrl + B shortcut key (Double key combination)</h3>
<h3>Press Ctrl + Alt + Y shortcut key (Multiple key combination)</h3>
<h3>Press Ctrl + Alt + Shift + U shortcut key (Multiple key combination)</h3>

Add script tag before the closing tag of body tag and put in the below script.

document.onkeyup = function(e) {
  if (e.which == 77) {
    alert("M key was pressed");
  } else if (e.ctrlKey && e.which == 66) {
    alert("Ctrl + B shortcut combination was pressed");
  } else if (e.ctrlKey && e.altKey && e.which == 89) {
    alert("Ctrl + Alt + Y shortcut combination was pressed");
  } else if (e.ctrlKey && e.altKey && e.shiftKey && e.which == 85) {
    alert("Ctrl + Alt + Shift + U shortcut combination was pressed");
  }
};

Key press events like keyup, keypress, and keydown events can be used to trigger a function call. Here in this example, the keyup event is used, which is triggered when the user releases the key from the keyboard. e.which the read-only property holds the information about the key which was pressed. But which property may not work on all the browsers. Some browsers use keyCode property. So for cross browser compatibility you can use something like this.

var key = e.which || e.keyCode;

Here 77, 66, 89, 85 are the key code representations of different characters and these are different from ASCII values. ctrlKey, shiftKey and altKey are the read-only properties which hold boolean information about these keys.

This was using plain JavaScript. Now let’s try this using jQuery.

Using jQuery

For this example, let’s create a simple Login page, which displays a message whenever Caps Lock is ON.

Let’s add two input boxes ‘Username’ and ‘Password’ and a ‘Sign in’ button. Add a paragraph below the Password input box which has ‘Caps Lock is ON’ message.

<h3 class="container">Displays message whenever CAPS LOCK is ON</h3>  
<div class="container-fluid content">
  <form class="form-horizontal">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="Password">
    </div>
    <div id="message" class="form-group">
        <p>Caps lock is ON</p>
    </div>
    <div class="form-group">
    <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </form>
</div>

Now coming to the JS part of the code, initially we want the ‘message’ to be hidden. So include this,

$('#message').hide();

Now to find out whether the Caps Lock is On or not, simply use a keypress event, so whenever the user presses a key, the keycode information is extracted and checked whether it is in lower case or upper case. Based on this the message is made visible. The code should look something like this.

$(document).ready(function() {
    $('#message').hide();
})
$('.form-control').keypress(function(e) {
  var c = String.fromCharCode(e.which);
  if (c.toUpperCase() === c && c.toLowerCase() !== c && !e.shiftKey) {
    $('#message').show();
  } else {
    $('#message').hide();
  }
});

In the above code shift, key property is also checked, to see whether shift key was pressed along with another key.

The only issue with the above code is, it displays the message whenever a character is pressed and not when the caps lock key is pressed.

The KeyCode Finder

In the first example, we used key codes like 77, 66, 89, and 85. This example helps you to find out these keycodes.

I have a created a pen for this example, just press the desired key and it will display the key code associated with that key.

Using Mousetrap.js

Imagine a situation where there are a lot of shortcut keys to be implemented in a page, using above methods is not feasible. For example in a cloud-based IDE, there are a lot of shortcut keys used. So this can be simplified using the JS library Mousetrap.js. The CDN link is here.

I have created a simple pen for this example.

Here, in this example Mousetrap.bind function is used. This function binds a key combination with a callback function. There are some other functionalities also with this library. Read about all of them here.

Conclusion

All these above examples explained how to use keyboard shortcuts in JS. The Mousetrap library simplifies this whole process by just using bind method. There are many other libraries like KeyboardJS, Keypress or Keymaster which all do almost the same thing.