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
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

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!