Add a keyboard shortcut using javascript

When reading a web page,it's more comfortable for a user if that page supports keyboard shortcuts,since then a web user always no need to struggle with mouse.

Add a keyboard shortcut means an event which triggers once a keyboard key is pressed.Hence the javascript event listener 'onkeyup' is used for it.

This method allow you to perform an action when a key is pressed.Each keyboard key have its own keyboard code.

For example;

Tab key code is 9

Enter key code is 13

Shift key code is 16

Ctrl key code is 17

Left Arrow key code is 37

We can defined our own custom keyboard keys association for a shortcut.And what we have to do is,once a user pressed keyboard keys, just need to verify that keys pressed and compare the returned value with the keyboard code associated with the keys used in our custom defined keyboard shortcut.

Example:

var isShift = false; document.onkeyup=function(e) {
if(e.which == 16) isShift=false;
}document.onkeydown=function(e){
if(e.which == 16) isShift=true;
if(e.which == 37 && isShift == true){
alert('Keyboard shortcut(shift key+left arrow key) is activated!');
return false;
}
}

In the above example,we verify the key pressed down by the user. If the key pressed are Shift+Left Arrow Key, a function will be triggered.First verify that Shift is pressed by user.

If yes,then isShift variable is set to true.If the keys are releases then isShift will set to false again.Once done,we hav to verify that the second pressed key is left arrow key.

As the shortcut consists of a keyboard combination,we also have to check isShift variable has value true.If the isShift variable is set to true and the second pressed key is left arrow key,then the triggered javascript alert will display as a message.

For more information regarding keyboard shortcuts visit;

1. http://www.openjs.com/scripts/events/keyboard_shortcuts/
2. http://www.catswhocode.com/blog/using-keyboard-shortcuts-in-javascript