Adding keyboard shortcuts to your web application

Use JavaScript to bring an old school feature to modern web apps

Keyboard shortcuts might seem kind of old school since they're mainly associated with desktop applications, but bringing some basic shortcut functionality into your web application can easily enhance the user experience.

In complicated web applications we often hear from users that actions require "too many clicks" to complete. Frequently this means it takes more than just one click, for example clicking "Add" then having to click "Save" or "Close" after entering some information.

t.gif

In a simple example like this, it's straightforward to add basic keyboard shortcuts to help reduce mouse clicks and make the user more productive. Using JavaScript you can add an event listener to a keyboard action, such as 'onkeydown' which will trigger your custom code to run and also pass along information related to the event.

keyCodes

The relevant information related to the event is stored inside a property called keyCode. By checking the value of keyCode you can determine what key was pressed and take the appropriate action.

Consider the following JavaScript example:

The code binds an event listener to the entire document. If a key is pressed anywhere on the page the checkShortcuts() function is called. The checkShortcuts function accepts a parameter named events which is supplied by the event listener automatically. Pressing any key will display the associated keyCode value for the key you just pressed. Using this code you can determine the keycode for any key on the keyboard.

Pressing the "Enter" key will yield a keyCode value of 13, which pressing the "Esc" key will give you 27. Using these two basic key strokes we can add some useful functionality to a web application.

In this example, we'll check for the Enter and Esc keys specifically then execute some action when they are encountered:

A common action to perform when the Enter key is pressed is to submit a form or save some input. The escape key could be used to trigger a cancel button or to close a form or window. With these two basic handlers you're able to add desktop-like functionality that users are accustomed to into a modern web application.

Key Combinations

The checkShortcuts() function can easily be extended to other keys by adding their keyCodes to the switch statement, but what if you want to handle more complex key combinations such as shift+s to perform a save action?

Note: We’re using shift+s rather than ctrl+s to avoid conflicting with the browsers default keyboard shortcuts.

In this case I would turn to jQuery and one of several available plugins designed to handle keyboard events. For example, jQuery Hotkeys which provides the desired functionality in a simple way.

Once you include jQuery and the jquery.hotkeys plugin you will be able to bind to individual keys or key combinations in a more intuitive text based fashion:

Conclusion

It might seem a little odd at first but once users are aware of the shortcuts you can increase their productivity pretty rapidly by reducing how often they need to stop typing and reach for the mouse.

Top 10 Hot Internet of Things Startups
Join the discussion
Be the first to comment on this article. Our Commenting Policies