Alaa Badran

Lot of jQuery projects relies on keyboard/mouse event like pressing “p” for previous and “n” for next also using the arrows.

Because this is important, I have managed a code to get the keyboard character on 3 events:
– Keypress
– Keyup
– Keydown

I have created a function to return the key as below:

 
function getKey(key){ 
  if ( key == null ) { 
    keycode = event.keyCode; // To Mozilla 
  } else { 
    keycode = key.keyCode; 
  } 
  // Return the key in lower case form 
  return String.fromCharCode(keycode).toLowerCase(); 
} 

Now let’s use the events:

 /*Keypress*/ 
$(document).keypress(function (eh){ 
  alert("Keypress: The key is: "+getKey(eh)); 
});

/*Keyup*/
$(document).keyup(function (eh){
  alert("Keyup: The key is: "+getKey(eh));
});

/*keydown*/
$(document).keydown(function (eh){
  alert("Keydown: The key is: "+getKey(eh));
});

To see an exaple of this code, please check the demo below:
jKey demo

Have fun.

Related posts:

Drag and Drop with jQuery for Touch Devices jQuery Gloss Plugin Better way to load XML document with Javascript Scroll window smoothly using jQuery