The Keyboard Shortcut to Success

In business school, there’s a theory that bankers shouldn’t be allowed to have computer mice until they master Excel’s numerous keyboard shortcuts. I’m not sure if any banks actually do it, but I like the idea.

Relying on your mouse to access a menu or format text is as inefficient as hunt & peck typing. Fortunately for the web, keyboard shortcuts are gaining popularity.

I’ve been experimenting with Mousetrap from Craig Campbell and I really dig it. It’s a small, well maintained library for creating keyboard shortcuts and has no dependencies (looking at you jQuery).

Mousetrap is very intuitive, all you have to do is bind the key sequence to a callback. My favorite feature is how it automagically handles ? and ^ without worrying about the shift modifier. You can grok the docs for more, but here are a few shortcuts I’m adding to my next app:

```js // single key shortcut Mousetrap.bind(“?”, function() { console.log(‘Yep, this app is keyboard enabled!’); showHelp(); });

// multi-key shortcut Mousetrap.bind(‘capslock+G’, function() { alert(‘Capslock is stupid.’); });

// gmail style, sequential key-press shortcut Mousetrap.bind(‘y u n o’, showMeme());

// and of course, the konami code of misspent youth Mousetrap.bind(‘up up down down left right left right b a enter’, easterEgg()); ```

Join the discussion

2017 Neal Shyam