February 15, 2013, 8:00 AM —
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.
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.
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.
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.
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:
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.