If our application is widely used by a person who doesn’t like to waste time by pressing and selecting everything with the mouse, then we should consider implementing shortcuts with JavaScript. A person who is usually accustomed to use keyboard shortcuts will certainly find it easy to boost all his activities. Mousetrap is a simple library for handling keyboard shortcuts in JavaScript. It has support for keypress, keydown and keyup events on specific keys, keyboard combinations, or key sequences.
Why Mousetrap?
There are a number of other similar libraries out there but the following features makes this one different.
- There are no external dependencies, no framework is required
- It works with international keyboard layouts
- You can bind Gmail like key sequences in addition to regular keys and key combinations
- You can programmatically trigger key events with the trigger()method
- It works with the numeric keypad on your keyboard
- The code is well documented/commented
A sample application implemented in WaveMaker showcases the usage and easiness of using mousetrap plugin.
How to get started
Download the minified version and include it in your page using a script tag
|
1 |
<script src="resources/js/mousetrap.min.js"></script> |
To add keyboard shortcuts in your document, Mousetrap has the useful method bind. This method expects as first argument either a string or an array with some literal keyboard combinations. Some examples are given below for various cases.
To add shortcut for a single key by specifying its value on the first argument string of bind:
|
1 2 3 |
Mousetrap.bind('4', function() { console.log('4'); }); Mousetrap.bind("?", function() { console.log('show shortcuts!'); }); Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup'); |
By default, Mousetrap action is triggered when the key is down (and if pressed continuously triggered). If you want to change this behaviour and trigger its callback only once when the key is up, you can specify it with the third argument of bind:
|
1 2 3 4 |
Mousetrap.bind('esc', function() { console.log("You pressed escape, don't you try to run !"); // On keyup }, 'keyup'); |
With Mousetrap you are able to specify when a special key is pressed (CTRL on Windows, Command on Mac or the Alt key) and create a combination:
|
1 2 3 4 5 6 7 8 9 10 11 |
Mousetrap.bind('alt+a', function() { alert("You pressed ALT+A !"); }); Mousetrap.bind('command+shift+k', function() { console.log('command shift k !'); }); Mousetrap.bind(['command+k', 'ctrl+k'], function() { console.log('command || ctrl k !'); }); |
With these properties checked, we will have a look at our application.
There are 2 forms in the main page.
Clicking on the first form should call the function to enable keyboard shortcut ctrl+s for saving using save button in that particular form.
Similarly, for second form, on clicking and then keyboard shortcut should enable save using second save button.
Implementation
Lets have a look at the code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Application.$controller("MainPageController", ["$scope", function($scope) { "use strict"; $scope.onPageReady = function() { }; function generateBtn(e, id) { if (e.preventDefault) { e.preventDefault(); let btnName = 'btnSave' + id; $scope.Widgets[btnName].onClick(); } return false; } $scope.setupVar1 = function($event, $isolateScope) { Mousetrap.bind(['command+s', 'ctrl+s'], function(e) { generateBtn(e, 1) }) } $scope.setupVar2 = function($event, $isolateScope) { Mousetrap.bind(['command+s', 'ctrl+s'], function(e) { generateBtn(e, 2) }) } $scope.btnSave1Click = function($event, $isolateScope) { alert("btnSave1 clicked by first Ctrl+s button"); }; $scope.btnSave2Click = function($event, $isolateScope) { alert("btnSave2 clicked from second Ctrl+s button"); }; }]); |
On clicking on first form, setupVar1($event, $scope) is invoked and for second form, setupVar2($event, $scope) is invoked respectively. In that we are binding Mousetrap property to add keyboard shortcut ‘command+s’ or ‘ctrl+s’ for each buttons. generateBtn() method is used to determine the save button.
Similarly, mousetrap has many other methods like unbind, trigger, stopCallback, reset etc which makes developers life easy!