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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    MooTools, Mario, and Portal

    I'm a big fan of video games. I don't get much time to play them but I'll put down the MacBook Pro long enough to get a few games in. One of my favorites is Portal. For those who don't know, what's...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

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!