jump to navigation

Detecting Hot-keys Events With JQuery October 27, 2011

Posted by Tournas Dimitrios in JQuery.

One of the great things about jQuery is its built in event handler system , which gives you a whole host of predefined user events that you can listen out for and act upon . When I talk about user events , I am talking about keydown , keyup , mousedown , blur , focus etc… You can listen out for all of these events, more importantly on specific elements , be it form elements , DIV’s , images … whatever . Registering for a  key event is simple as writing this code :


if(event.keycode == 13){ 
do_something(); }



For every event there is an event object which we can interrogate . The way we do this is we call the object property “keycode” which will return a numerical value pertaining to the key that was pressed . For example , above I am checking for keycode “13″, which is the numeric value for the [ENTER] key . For all other keycodes you may need visit this site . Therefore , in the example above , the function do_something() will be called when the [ENTER] key is pressed and the focus is on the “#someDiv” DOM object (assuming that its an input box for example) . Simple as that ……

Integrating Keyboard Event’s  can add further usability to websites that have high interactivity with the user or need input via the keyboard as key combinations that trigger events on the page . They could also be useful to provide quick shortcuts or for keypad entry , the list goes on .  jQuery Hotkeys is a plug-in that lets you easily add and remove handlers  for keyboard events anywhere in your code supporting almost any key combination . This plugin , developed  by Tzury Bar Yochay  ,  is only 4K ( 3K minified) and support   ‘keydown’, ‘keyup’ and ‘keypress’ keyboard events . A simple code-example could be :

<script src="jquery-1.4.2.js"></script>
<script src="jquery.hotkeys.js"></script>

<input type="button" id="bindCtrlS" value="bind ctrl+s" />
<input id="<span class=" type="button" />unBindCtrlS" value="unbind ctrl+s" />
function bindCtrlS(){
jQuery(document).bind('keydown', 'ctrl+s',function (evt){
return false;

function unBindCtrlS(){
jQuery(document).unbind('keydown', 'ctrl+s');

$('#bindCtrlS').bind('click', bindCtrlS);
$('#unBindCtrlS').bind('click', unBindCtrlS);


Altenative plug-ins :



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s