Detecting keypresses cross-browser using jquery

Date: 26th February 2009 at 8:36 pm | Filed under: development, scripts | Author: Sam Burdge | Tags: , , ,

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:

  1. Concise code
  2. Easy to implement various functions on keypress
  3. 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/

7 Responses to “Detecting keypresses cross-browser using jquery”

  • Comment by Steve Holden
    Date: June 26th, 2009 at 4:03 pm

    What happens when the page contains a form and the user types into the form inputs?

  • Comment by Sam Burdge
    Date: June 26th, 2009 at 4:27 pm

    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;
    });

  • Comment by lionel
    Date: October 8th, 2009 at 9:39 pm

    Hi, thanks for the infos, the code is working well, but is it possible to replace the windows.location by an ajax call ? thanks ?

  • Comment by lionel
    Date: October 8th, 2009 at 9:40 pm

    if yes how ? ;) thanks

  • Comment by links for 2010-03-13 | Folks Pants
    Date: April 8th, 2010 at 5:22 pm

    [...] Detecting keypresses cross-browser using jquery | Sam Burdge (tags: jquery keypress) [...]

  • Comment by Jason Cramer
    Date: March 15th, 2011 at 11:58 pm

    BRILLIANT! This was exactly what I had been looking for. Love the color scheme to your site too. Very retro DOS-ish.

  • Comment by Rachel Nabors
    Date: March 17th, 2011 at 1:49 pm

    Hello Sam! This is exactly what I am looking for for arrow-key navigation through my comics site. I need to disable it when people are typing in comment fields, though, and I just can’t seem to implement your example code for disabling above.

    Could you expand on it a bit? It would be a great help if you could!

Leave a Comment