jQuery keypress() event not firing?

Question

I am trying to fire an event on the right and left arrow key presses with jQuery. Using the following code, I can fire events on any of the alphanumeric keys, but the cursor keys (up, down, left, right) fire nothing. I am developing the site primarily for IE users because it is a line of business app. Am I doing something wrong here?

$('document').keypress(function(e){
    switch (e.which) {
        case 40:
            alert('down');
            break;
        case 38:
            alert('up');
            break;
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
        default:
            alert('???');  
            }      
});

Answer 1

e.which doesn't work in IE try e.keyCode, also you probably want to use keydown() instead of keypress() if you are targeting IE.

See http://unixpapa.com/js/key.html for more information.

Answer 2

Got it:

In IE, jQuery will fire keydown(), not keypress() for the arrow keys, because they are considered 'special' keys.

Thanks for the link, Nick. That pointed me in the right direction.

Answer 3

With jQuery, I've done it this way:

function checkKey(e){
     switch (e.keyCode) {
        case 40:
            alert('down');
            break;
        case 38:
            alert('up');
            break;
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
        default:
            alert('???');  
            }      
}

if ($.browser.mozilla) {
    $(document).keypress (checkKey);
} else {
    $(document).keydown (checkKey);
}

Also, try these plugins, which looks like they do all that work for you:

http://www.openjs.com/scripts/events/keyboard_shortcuts

http://www.webappers.com/2008/07/31/bind-a-hot-key-combination-with-jquery-hotkeys/

Answer 4

You've got the word: document in a string. Change:

$('document').keypress(function(e){

to

$(document).keypress(function(e){

Answer 5

Hi Frnds, Ofcourse this is a closed issue, i would like to add something to your discussion

In mozilla i have observed a weird behaviour for this code

$(document).keydown(function(){ //my code });

the code is being triggered twice. When debugged i found that actually there are two events getting fired: 'keypress' and 'keydown'. I disabled one of the event and the code shown me expected behavior.

$(document).unbind('keypress'); $(document).keydown(function(){ //my code });

This works for all browsers and also there is no need to check for browser specific(if($.browser.mozilla){ }).

Hope this might be useful for someone

Answer 6

keydown instead of keypress fixed my issue. Kudos!

Answer 7

It is not a closed issue, try it with arrows. KeyPressed doesn´t fire on iexplorer