How to create Ctrl+Key shortcuts in Javascript

Everybody loves shortcuts, so why should you deny your users of this guilty pleasure when it comes to your javascript-driven web application? Giving your users the ability to execute commands with simple shortcuts can make all the difference in the usability of your application.

Javacript Code

Here is the simple code that allows you to capture when a desired set of keys are pressed. In this example, we are focusing on CTRL+S, but it can be expanded easily with just a few lines of code per shortcut you wish to add..

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) {
		//run code for CTRL+S -- ie, save!
		return false;
	}
}

jQuery Code

Here is an example of how to create a Ctrl+Key based shortcut within javascript using the jQuery Library.

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) {
		//run code for CTRL+S -- ie, save!
		return false;
	}
});

Explanation

This code is quite simple but let me explain it a little bit. Whenever a key is pressed down, we first check to see if its CTRL being pressed (key code 17). If it is CTRL, then we set isCtrl to true in order to keep track when CTRL is activated, and of course we return isCtrl back to false once CTRL is released via the keyup event. We must keep track of the CTRL activity with a variable because the event will fire on a per-key basis. When you press ctrl+S for example, the event fires twice with two different key codes – making it impossible to simply check for both keys in one swift action.

Now going back to the keydown event; after the CTRL key check, we can look to see if other keys are being pressed. In this example, key code 83 is for the S key, which in one example could be useful for allowing quick saving of a form. And lastly, the return false; plays a very important role in keeping the browser from picking up that particular key combination and acting on it. In the example above of using CTRL+S, normally when you press that the browser will prompt you to save the page – but with the return false, the browser backs down and stays quiet.

Additional Shortcut Examples

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) {
		//run code for CTRL+S -- ie, save!
		return false;
	}
	if(e.which == 79 && isCtrl == true) {
		//run code for CTRL+O -- ie, open!
		return false;
	}
	if(e.which == 84 && isCtrl == true) {
		//run code for CTRL+T -- ie, new tab!
		return false;
	}
}

Library

As posted in the comments, there is a nice library to get this done over at openjs.com. If your looking for a simple solution that covers all angles, check out Handling Keyboard Shortcuts in JavaScript

Javascript Key Codes

Key PressedKey Code
backspace8
tab9
enter13
shift16
ctrl17
alt18
pause/break19
caps lock20
escape27
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
left window key91
right window key92
select key93
numpad 096
numpad 197
numpad 298
numpad 399
numpad 4100
numpad 5101
numpad 6102
numpad 7103
numpad 8104
numpad 9105
multiply106
add107
subtract109
decimal point110
divide111
f1112
f2113
f3114
f4115
f5116
f6117
f7118
f8119
f9120
f10121
f11122
f12123
num lock144
scroll lock145
semi-colon186
equal sign187
comma188
dash189
period190
forward slash191
grave accent192
open bracket219
back slash220
close braket221
single quote222