Using keyboard shortcuts in Javascript

by Jean.

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

KeyKeyboard code
Backspace8
Tab9
Enter13
Shift16
Ctrl17
Alt18
Pause19
Capslock20
Esc27
Page up33
Page down34
End35
Home36
Left arrow37
Up arrow38
Right arrow39
Down arrow40
Insert45
Delete46
048
149
250
351
452
553
654
755
856
957
a65
b66
c67
d68
e69
f70
g71
h72
i73
j74
k75
l76
m77
n78
o79
p80
q81
r82
s83
t84
u85
v86
w87
x88
y89
z90
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
F1112
F2113
F3114
F4115
F5116
F6117
F7118
F8119
F9120
F10121
F11122
F12123
=187
Coma188
Slash /191
Backslash \220

CWC Special Deal!

Get one year of quality hosting + domain from A Small Orange for only $40 with our exclusive deal!

Featured WordPress Theme

Videobox - Video / Magazine / WooCommerce WordPress Theme