I’ve had to work with getting user input values based off of the keycode from the event a few times, and figured I’d throw together some of that functionality in case anyone else is wrestling with this functionality. Below is a simple “keycode” object that has a few utility functions, and maps of values to keycodes.
keycode = {
getKeyCode : function(e) {
var keycode = null;
if(window.event) {
keycode = window.event.keyCode;
}else if(e) {
keycode = e.which;
}
return keycode;
},
getKeyCodeValue : function(keyCode, shiftKey) {
shiftKey = shiftKey || false;
var value = null;
if(shiftKey === true) {
value = this.modifiedByShift[keyCode];
}else {
value = this.keyCodeMap[keyCode];
}
return value;
},
getValueByEvent : function(e) {
return this.getKeyCodeValue(this.getKeyCode(e), e.shiftKey);
},
keyCodeMap : {
8:"backspace", 9:"tab", 13:"return", 16:"shift", 17:"ctrl", 18:"alt", 19:"pausebreak", 20:"capslock", 27:"escape", 32:" ", 33:"pageup",
34:"pagedown", 35:"end", 36:"home", 37:"left", 38:"up", 39:"right", 40:"down", 43:"+", 44:"printscreen", 45:"insert", 46:"delete",
48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";",
61:"=", 65:"a", 66:"b", 67:"c", 68:"d", 69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l",
77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z",
96:"0", 97:"1", 98:"2", 99:"3", 100:"4", 101:"5", 102:"6", 103:"7", 104:"8", 105:"9",
106: "*", 107:"+", 109:"-", 110:".", 111: "/",
112:"f1", 113:"f2", 114:"f3", 115:"f4", 116:"f5", 117:"f6", 118:"f7", 119:"f8", 120:"f9", 121:"f10", 122:"f11", 123:"f12",
144:"numlock", 145:"scrolllock", 186:";", 187:"=", 188:",", 189:"-", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"'"
},
modifiedByShift : {
192:"~", 48:")", 49:"!", 50:"@", 51:"#", 52:"$", 53:"%", 54:"^", 55:"&", 56:"*", 57:"(", 109:"_", 61:"+",
219:"{", 221:"}", 220:"|", 59:":", 222:"\"", 188:"<", 189:">", 191:"?",
96:"insert", 97:"end", 98:"down", 99:"pagedown", 100:"left", 102:"right", 103:"home", 104:"up", 105:"pageup"
}
};Typically, you would have an event listener on an input that would call keycode.getValueByEvent(). You would have to pass in the event, (which is by default the first parameter passed into your event listener function). This code handles the shift key modifier and the value that results from using it.
6 Comments
nice code. thanks. btw: good google ranking!
Out of curiosity, how come you didn’t use String.fromCharCode()?
To be honest, I wasn’t aware of that function. A quick look shows it seems to be right for alpha-numeric characters, but doesn’t handle some of the special characters, like return, shift, tab, backspace etc. I know there is some oddness with various browsers reporting different values for charCode and keyCode based on what event you are listening to (keypress, keydown, keyup), and in the example I am using keyCode values, and I typically use the keyup event. Definitely worth checking out if it can simplify the process some though, thanks for the heads up, let me know what you find as well.
modifiedByShift : {
191:”/”
}
Hi, I have a detail, the shift back 191 /
Greetings
Thanks a bunch! This saved me a lot of time. I only changed one part the getKeyCode method:
other than that, THANKS!!!
Hi Brad
Nice post indeed.
I am new in javascript programming, I am looking for OOPs javascript help. Can you suggest me from where I can find the good stuff i.e. videos or live examples etc etc.. so that I can start my career in OOP javascript.
Thanks in advance.
Pl. mail me at baljitweb@gmail.com
regards
baljeet