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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    CSS calc

    CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...

  • By
    Prevent Page Zooming in Mobile Browsers

    Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff -- it's because my iPhone lets...

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!