Create Keyboard Shortcuts with Mousetrap

By  on  

Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of keyboard shortcuts and they make navigating exponentially faster.  After evaluating a few keyboard microlibraries, I've found Mousetrap to be the best!

Using Mousetrap

Mousetrap's bind method is the key to the madness, accepting the key(s) to listen to, the callback method, and a specific event to use (if present):

Mousetrap.bind("s", function(e) {
	// Focus on the search field, do whatever
});

What's immediately nice to see is that you can reference keys by key name and not need to look up key code numbers.  You can listen for multiple keys by adding a + between them:

Mousetrap.bind("shift+k", function() {
	// Create a link
});

You can also listen for key sequences by separating keys with spaces:

Mousetrap.bind("d a v i d", function() {
	// Alert "FTW"
});

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

In the case of listening for likewise events, you can pass Moustrap an array:

Mousetrap.bind(["command+s", "ctrl+s"], function() {
	// Save the form
});

Modifier keys like SHIFT and CONTROL may also be used:

Mousetrap.bind("shift+k", function() {
	// Yay for extra key control
});

You can also use keys which require SHIFT without needing to cite the key:

Mousetrap.bind("* _ $", function() {
	// Yay for extra key control
});

Removing event listeners can be done with a simple unbind call, passing the key(s) to which unbind:

Mousetrap.unbind("s");

You can ever trigger an event if you'd like:

Mousetrap.trigger("s");

Essentially you get maximum control over key events.  Mousetrap even provides a more advanced functionality if you need it, so check out the official documentation to learn more.

Mousetrap is an awesome utility:  simple, useful, and tiny.  You can probably get away with avoid this micro-library if you only have a few keys to listen for, but if you're looking to do advanced keyboard handling and navigation, Mousetrap is perfect.

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    CSS Triangles

    I was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I'm a disaster when it comes to images and the prospect of needing to make an image for...

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

Discussion

  1. “These “small details” can often add up to big, big gains”.
    Really true. And I guess as far as the web goes, javascript is what provides all the “smalldetails”. I have programmed for a long time with a focus on the server side of the web. I have started to delve deeper into javascript and CSS and this is very helpful.

  2. This is just awesome! I can already think of so many scenarios where I can use this.

    Thanks

  3. boris

    what’s the meaning?

    “You can also use keys which require SHIFT without needing to cite the key:

    Mousetrap.bind("* _ $", function() {
    	// Yay for extra key control
    });
    

    • You don’t have to press “shift+4”, for example, to listen for “$” — you can use the character instead.

  4. Mousetrap is great. We have used it to provide the same keyboard shortcuts as Google Reader had to our Google Reader alternative – http://silverreader.com .

    • And sorry for the link / spamming… I have tried to wrap it
      with *shameless plug*, but it got removed when posted :)

  5. you forgot “select” in your Konami code

  6. great article btw

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!