If you want to enhance your web app, Javascript keyboards shortcuts is definitely something to consider. In this article, you’ll learn to use JS keyboard shortcuts, with and without the JQuery framework.

Keyboard shorcuts on the web, let’s talk about it
The most important thing to think about when implementing Javascript keyboard shortcuts on a web app is to avoid redefining shortcuts provided by the client’s browser. Imagine that you’re using a web app, you want to close the tab by pressing Cmd+W, and the web app trigger an action, just because the developer redefined a keyboard shortcut used by your browser…How annoying. This is why I recommend to avoid using the Ctrl (Windows) or Cmd (Mac) key for your web app shortcuts. You should definitely use another key as such as F1, for example.

As you may already know, Javascript have lots of useful event listeners. For keyboard shortcuts, we’ll use onkeyup,
which allow you to perform an action when a key is pressed. Then, we’ll just have to compare the returned value with the keyboard code associated with the key used by one of our custom defined keyboard shortcuts.

Keyboard codes are simple code consisting of 2 or 3 numbers. Each keyboard key have its own keyboard code. For exemple, the Ctrl key code is 17.

For a full reference of keyboard keys, scroll down to the end of this post.

Examples
In the following example, we’re simply going to verify the key pressed down by the user. If the key pressed are Ctrl+S, a function will be triggered.

First example, without JQuery:

var isCtrl = false;
document.onkeyup=function(e) {
if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
alert(‘Keyboard shortcuts are cool!’);
return false;
}
}Example with the JQuery framework:

var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
alert(‘Keyboard shortcuts + JQuery are even more cool!’);
return false;
}
});In theses examples, we started by verifying that the Ctrl is pressed by the user. If yes, the initial value of the isCtrl variable is set to true. If the keys are released, isCtrl will be set to false again.

Once done, we have to verify that the second pressed key is S. As the shortcut consists of a keyboard combination, we also have to check that is isCtrl variable have true as a value.

If both the isCtrl variable ius set to true and the second pressed key is S, then we can trigger a Javascript alert to display a message. Of course, in a “real” web app, you’ll use a more useful function

Keyboard codes reference
Key Keyboard code
Backspace 8
Tab 9
Enter 13
Shift 16
Ctrl 17
Alt 18
Pause 19
Capslock 20
Esc 27
Page up 33
Page down 34
End 35
Home 36
Left arrow 37
Up arrow 38
Right arrow 39
Down arrow 40
Insert 45
Delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
0 (numpad) 96
1 (numpad) 97
2 (numpad) 98
3 (numpad) 99
4 (numpad) 100
5 (numpad) 101
6 (numpad) 102
7 (numpad) 103
8 (numpad) 104
9 (numpad) 105
* 106
+ 107
– 109
. 110
/ 111
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
= 187
Coma 188
Slash / 191
Backslash 220