Detecting keypresses cross-browser using jquery
Using keypresses as an alternate way to to navigate through websites is a great way to make sites more accessible. For instance pressing 'p' takes the user to the previous page, while pressing 'n' takes them to the next. The benefits of using jQuery to achieve this are:
- Concise code
- Easy to implement various functions on keypress
- Works on IE, Firefox & Safari
DETECTING THE KEY CODE
To detect which key a user has pressed you need to set up a function that returns an ascii code each time a key is pressed. A full table of ascii codes is available here. The tricky part to this is that Mozilla and Safari define the value as charCode, while IE defines it as keyCode. The following script is based on the 'n' key and 'p' key, it takes the links from the 'Previous' and 'Next' buttons on your site and changes page when the key is pressed. Also note that it is important to detect for both the lower-case and upper-case letter as the ascii codes will be different for each.
SOURCE
//process this function whenever a key is pressed
$(document).keypress(function (e) {
//Next
//if the keyCode or charCode is 110 (lower case n) or 78 (upper case N)
if (e.keyCode == 110 || e.charCode == 110 || e.keyCode == 78 || e.charCode == 78){
//grab the href attribute from the link with the id "next_link"
var next_link = $("a#next_link").attr("href");
//if the next link exists (i.e if it's not the last page)
if(next_link){
//go to the next page
window.location = next_link;
}
}
//Previous
//works exactly as the above example but for the 'p' and 'P' keys
if (e.keyCode == 112 || e.charCode == 112 || e.keyCode == 80 || e.charCode == 80){
var prev_link = $("a#prev_link").attr("href");
if(prev_link){
window.location = prev_link;
}
}
});
You must have the jQuery library installed on your site to run this script. For more info about jquery visit the site: http://jquery.com/
What happens when the page contains a form and the user types into the form inputs?
Hi Steve
Good question. I hadn’t tested that.
You could always try working around this by using the focus() and blur() events for the form input to switch the keypress function on or off.
Basic example:
$(’input’).focus(function(){
var keypress_active = false;
});
$(’input’).blur(function(){
var keypress_active = true;
});
Hi, thanks for the infos, the code is working well, but is it possible to replace the windows.location by an ajax call ? thanks ?
if yes how ?
thanks