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

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, Aug 26 '15 at 15:25

Nick Berardi · Accepted Answer · 2009-01-29T18:50:12.517

47

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.

edited Jan 29 '09 at 18:50

answered Jan 29 '09 at 18:41

Nick Berardi

54,393
15
113
135

I still get the same results. The alphanumeric keys all fire the default case, but the arrow keys fire nothing, not even the default. For whatever reason, I think the main keypress() event isn't firing. – Mark Struzinski Jan 29 '09 at 18:45
2

[jQuery normalizes the .which property so you can reliably use it to retrieve the key code.](http://api.jquery.com/keyup/) `keyup()` works for me in IE10 document mode of IE11 with jQuery 2.1.0. – Cees Timmerman Jul 08 '14 at 10:38
1

`keydown` and `keypress` are not equivalent. You imply they are interchangeable, when they are not. This is the software equivalent of "if it hurts when you put your arm up like this, then don't put your arm up like this" – doug65536 Feb 18 '16 at 22:06

score 41 · Answer 2 · answered Jan 29 '09 at 18:54

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/

wow; lots of searching and this was the only response I've found that talked about the differences with browser support for keypress/keydown — NotMe, Feb 25 '11 at 21:02
That line about keypress and keydown depending on browser is crucial. — ankimal, Mar 03 '11 at 22:36

score 13 · Answer 3 · edited Jun 02 '15 at 01:10

13

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

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

to

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

edited Jun 02 '15 at 01:10

John Targaryen

1,109
1
13
29

answered Jun 10 '09 at 15:20

score 3 · Answer 4 · edited Jan 21 '13 at 08:52

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

score 3 · Answer 5 · answered Aug 06 '14 at 01:28

3

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

answered Aug 06 '14 at 01:28

Denny

186
1
10

jQuery keypress() event not firing?

5 Answers5

Linked

Related