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:
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!