jQuery keypress() event not firing?

37
votes

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('???');  
            }      
});
5
javascriptjqueryinternet-explorer
Current jQuery docs say "modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events" which implies that keypress() should not work for arrow keys and that keydown() should be used instead. - crantok

5 Answers

47
votes

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.

41
votes

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/

13
votes

You have the word 'document' in a string. Change: 

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

to

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

Your original code has $('document')... when it should have $(document) without the quotes.

2
votes

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