Quick Tip: Add Keyboard Shortcuts To Your Web App
We power users love our keyboard shortcuts. We use them everywhere – in our code editor, in Photoshop, in gmail. And we hate it when we hit Ctrl+S in a web app, only to see our browser offering to download it. Adding shortcuts to your application is not hard at all. In this quick tip, we will show you how to do it, by using Mousetrap.js.
1. Single Keys
Single keys are easy. You can do it with a simple event listener for keypress on the document object. But with Mousetrap, it is even better.
After hitting the run button, focus the editor by clicking on it. Otherwise, it won’t register your key presses and the demo won’t work.
(Play with our code editor on Tutorialzine.com)
2. Alternative Symbols
Mousetrap shines when listening for more complex key combinations like capital letters and special symbols.
(Play with our code editor on Tutorialzine.com)
3. Key combinations
Combinations that involve the Control key are equally easy (see the next example for how to listen for both Control and the OS X Command key).
(Play with our code editor on Tutorialzine.com)
4. Multiple Combinations
Passing an array instead of a string lets you listen for multiple key combinations at once. This is useful when you have to listen for combinations which involve the Control (for Windows and Linux) and Command (for Mac) keys.
(Play with our code editor on Tutorialzine.com)
5. Sequences
This type of shortcuts are very powerful, and are used in apps like gmail. Works with array keys as well!
(Play with our code editor on Tutorialzine.com)
Conclusion
This was our quick tip on keyboard shortcuts. If you’ve used keyboard hotkeys before, or are brave enough to experiment with them in your next project, do share the results with us in the comments below.