Sometimes to improve our website performance and usability we may want to add some keyboard shortcuts which can used to perform common site tasks faster than a speeding bullet! In this article I will explain in easy to understand n00b language how to create keyboard events using jQuery.

This is how you do it.

// this is a generic setup to capture keyup events in jquery will console log for firebug

if(typeof console == 'undefined'){
	console = {};
	console.log = function(arg){return false;};
}

$(document).keyup(function(e){
	//find out which key was pressed
	switch(e.keyCode){
		case 65	:	console.log('a');	break;	// a
		case 66	:	console.log('b');	break;	// b
		case 67	:	console.log('c');	break;	// c
		case 68	:	console.log('d');	break;	// d
		case 69	:	console.log('e');	break;	// e
		case 70	:	console.log('f');	break;	// f
		case 71	:	console.log('g');	break;	// g
		case 72	:	console.log('h');	break;	// h
		case 73	:	console.log('i');	break;	// i
		case 74	:	console.log('j');	break;	// j
		case 75	:	console.log('k');	break;	// k
		case 76	:	console.log('l');	break;	// l
		case 77	:	console.log('m');	break;	// m
		case 78	:	console.log('n');	break;	// n
		case 79	:	console.log('o');	break;	// o
		case 80	:	console.log('p');	break;	// p
		case 81	:	console.log('q');	break;	// q
		case 82	:	console.log('r'); 	break;	// r
		case 83	:	console.log('s');	break;	// s
		case 84	:	console.log('t');	break;	// t
		case 85	:	console.log('u');	break;	// u
		case 86	:	console.log('v');	break;	// v
		case 87	:	console.log('w');	break;	// w
		case 88	:	console.log('x');	break;	// x
		case 89	:	console.log('y');	break;	// y
		case 90	:	console.log('z');	break;	// z
	}
});
Sam Deering Sam Deering
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Related books & courses
Available now on SitePoint Premium

Preview for $1