Sometimes it’s useful to quickly find out the keycode for keyboard character especially when your coding keyboard events in jQuery or JavaScript. This code snippet provides you with an easy way to capture the current key press and key code for use with “keypress”, “keydown” and “keyup” events.
Demo
I’ve loaded this script into this page so simply press any keyboard key now to display it’s code.
The Code
(function($)
{
/* get key code */
function getKeyCode(key)
{
//return the key code
return (key == null) ? event.keyCode : key.keyCode;
}
/* get key character */
function getKey(key)
{
//return the key
return String.fromCharCode(getKeyCode(key)).toLowerCase();
}
$(document).ready(function()
{
$(document).keydown(function (eventObj)
{
/* display the key and character code for the key you pressed */
alert("Key pressed: "+getKey(eventObj)+ " Code = "+getKeyCode(eventObj));
});
});
})(jQuery);
{
/* get key code */
function getKeyCode(key)
{
//return the key code
return (key == null) ? event.keyCode : key.keyCode;
}
/* get key character */
function getKey(key)
{
//return the key
return String.fromCharCode(getKeyCode(key)).toLowerCase();
}
$(document).ready(function()
{
$(document).keydown(function (eventObj)
{
/* display the key and character code for the key you pressed */
alert("Key pressed: "+getKey(eventObj)+ " Code = "+getKeyCode(eventObj));
});
});
})(jQuery);
If I get time i’ll code something to capture codes for mutiple key presses.
Related posts:



Pingback: jQuery Capture Single Key Press Event (Keyboard Shortcuts) | jQuery4u
Pingback: jQuery List of Events You Can Bind To | jQuery4u
Pingback: Useful jQuery Function Demos For Your Projects | VisionOn Technologies
Pingback: Useful jQuery Function Demos For Your Projects@smashing | seo博客大全
Pingback: Useful jQuery Function Demos For Your Projects | MyOfflineTheme.com Skyrocket Your Offline Business Just Now
Pingback: Useful jQuery Function Demos For Your Projects | DigitalMofo
Pingback: Useful jQuery Function Demos For Your Projects | E BLADE
Pingback: Rutweb Technology : Useful jQuery Function Demos For Your Projects
Pingback: Useful jQuery Function Demos For Your Projects | FloroGraphics.com
Pingback: Useful jQuery Function Demos For Your Projects | Web Design Kingston
Pingback: Useful jQuery Function Demos For Your Projects | webdezining
Pingback: Useful jQuery Function Demos For Your Projects | CS5 Design
Pingback: Useful jQuery Function Demos For Your Projects | Layout to HTML
Pingback: 50 jQuery Function Demos for Aspiring Web Developers - Smashing Coding