Creating Keyboard Shortcuts

A web page is very much a click- (or tap-) friendly medium, but that doesn’t mean you can’t build some keyboard support into your interface. For example, adding the tabindex="0" attribute to any HTML tag automatically makes that element “tabbable” (meaning a user can set the focus on that element by tapping the Tab key one or more times).

Another good example is a button that you feature on most or all of your pages. In that case, you can set up a keyboard shortcut that enables a user to execute the button by pressing a key or key combination.

You define a keyboard shortcut for a web page by setting up an event handler for the document object’s keydown event (which fires when the user presses, but hasn’t yet released, a key). Depending on the type of shortcut, you might also be able to define the shortcut using the document object’s keyup event (which fires when the user releases a pressed key). Your event handler needs to look for two kinds of keys:

Special keys: These include the Alt, Ctrl (or Control on a Mac), Shift, and Meta (that is, Cmd on a Mac) keys. When the user presses a special key, the KeyboardEvent object sets one of the following properties to true: altKey (for Alt), ctrlKey (for Ctrl or Control), shiftKey (for Shift), or metaKey (for Cmd).
Any other key: These include the letters, numbers, and symbols on a typical keyboard. In this case, the pressed key is returned as the KeyboardEvent object’s key property.

Tip

WebDev Workshop’s tools have their own shortcut keys: You can press Ctrl+Shift+R to execute the Run command, and you can press Ctrl+Shift+C to execute the Copy command.

This example sets up the Ctrl+Shift+B shortcut to run the button. (Note that since my example runs inside an iFrame, you probably need to click inside the Results box before the shortcut key will work.) Let’s take a look the JavaScript:

Line 2:

var btn = document.querySelector('.btn');

Returns a reference to the button element and stores it in the btn variable.

Line 5:

btn.addEventListener('click', function(e) {

Adds a ‘click’ event listener to the btn element.

Line 8:

btn.innerText = 'Thanks!';

When the ‘click’ event fires, the handler changes the button text.

Line 11:

setTimeout(resetButton, 3000);

Creates a timeout that runs the resetButton function after 3 seconds.

Line 15:

document.addEventListener('keydown', function(e) {

Adds a ‘keydown’ event listener to the document object.

Line 18:

if(e.ctrlKey && e.shiftKey && e.key === 'B') {

Checks to see if the user is currently pressing the Ctrl, Shift, and B keys simultaneously.

Line 21:

btn.click();

If the user is pressing Ctrl+Shift+B, this line triggers the btn element's click event.

Lines 25-32:

function resetButton() {…

This function resets the button's original text. It also triggers the button’s blur event, just in case the button was clicked.

Warning

Be careful when you choose your keyboard shortcuts. First, make sure you don’t create a shortcut that overrides a standard operating system shortcut, such as Ctrl+C (Copy) or Ctrl+P (Print). Second, make sure you don’t create a shortcut that overrides a built-in browser shortcut, such as Ctrl+T (New Tab) or Ctrl+D (Bookmark).

Tip

For most sites, the easiest way to avoid overriding system and/or browser keyboard shortcuts is to create single-character shortcuts. For example, if your site has a hamburger menu, you could set up the letter “m” as a shortcut to invoke that menu.