Mark Struzinski
Mark Struzinski

Reputation: 33501

jQuery keypress() event not firing?

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('???');  
            }      
});

Upvotes: 37

Views: 115311

Answers (5)

Abhinay Mehta
Abhinay Mehta

Reputation:

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

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

to

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

Upvotes: 13

Denny
Denny

Reputation: 306

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

Upvotes: 3

calyan
calyan

Reputation:

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

Upvotes: 4

Jack Lawson
Jack Lawson

Reputation: 2505

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/

Upvotes: 41

Nick Berardi
Nick Berardi

Reputation: 54894

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.

Upvotes: 47

Related Questions