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 is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.