Getting keycode values in Javascript

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.

  • del.icio.us
  • Digg
  • Facebook
  • Reddit
  • Twitter
  • Yahoo! Buzz
and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. User0815
    Posted October 21, 2009 at 5:35 am | Permalink

    nice code. thanks. btw: good google ranking!

  2. Posted March 16, 2010 at 12:40 pm | Permalink

    Out of curiosity, how come you didn’t use String.fromCharCode()?

  3. brad
    Posted March 16, 2010 at 1:18 pm | Permalink

    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.

  4. Jose
    Posted February 27, 2011 at 8:09 pm | Permalink

    modifiedByShift : {
    191:”/”
    }

    Hi, I have a detail, the shift back 191 /
    Greetings

  5. Posted October 10, 2011 at 9:47 am | Permalink

    Thanks a bunch! This saved me a lot of time. I only changed one part the getKeyCode method:

    
                getKeyCode: function (e) {
                    var keycode = e.keyCode || e.which;
                    return keycode;
                }
    

    other than that, THANKS!!!

  6. baljeet
    Posted December 15, 2011 at 11:46 pm | Permalink

    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

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Page optimized by WP Minify WordPress Plugin