Previous Post: Flash drives becoming popular medium for music distribution
Next Post: Why you should not use a reserve on your ebay auction

How to create Ctrl+Key shortcuts in Javascript

Posted By Scott Klarr on Feb 22, 2008 at 4:34 am

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 Pressed	Key Code
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	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
left window key	91
right window key	92
select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	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
num lock	144
scroll lock	145
semi-colon	186
equal sign	187
comma	188
dash	189
period	190
forward slash	191
grave accent	192
open bracket	219
back slash	220
close braket	221
single quote	222

Related Links

Comments (5)

Post Comment

Your Name
Email Address
Website URL
Comment

Your email address will not be visible to the public