83

I'm attempting to capture arrow key presses in jQuery, but no events are being triggered.

$(function(){
    $('html').keypress(function(e){
        console.log(e);
    });
});

This generates events for alphanumeric keys, but delete, arrow keys, etc generate no event.

What am I doing wrong to not be capturing those?

RedBassett
  • 3,469
  • 3
  • 32
  • 56

6 Answers6

193

You should use .keydown() because .keypress() will ignore "Arrows", for catching the key type use e.which

Press the result screen to focus (bottom right on fiddle screen) and then press arrow keys to see it work.

Notes:

  1. .keypress() will never be fired with Shift, Esc, and Delete but .keydown() will.
  2. Actually .keypress() in some browser will be triggered by arrow keys but its not cross-browser so its more reliable to use .keydown().

More useful information

  1. You can use .which Or .keyCode of the event object - Some browsers won't support one of them but when using jQuery its safe to use the both since jQuery standardizes things. (I prefer .which never had a problem with).
  2. To detect a ctrl | alt | shift | META press with the actual captured key you should check the following properties of the event object - They will be set to TRUE if they were pressed:

  3. Finally - here are some useful key codes ( For a full list - keycode-cheatsheet ):

    • Enter: 13
    • Up: 38
    • Down: 40
    • Right: 39
    • Left: 37
    • Esc: 27
    • SpaceBar: 32
    • Ctrl: 17
    • Alt: 18
    • Shift: 16
Tschallacka
  • 27,901
  • 14
  • 88
  • 133
Shlomi Hassid
  • 6,500
  • 3
  • 27
  • 48
  • 1
    @Isaac Great addition edited the answer +1 - Note that it will map to the Windows Command Key also. Thank you. – Shlomi Hassid Mar 22 '18 at 15:49
  • Using key down causes the page to scroll unfortunately. Add a preventDefault() to the event to prevent this. – JSON May 18 '18 at 16:29
34
$(document).keydown(function(e) {
    console.log(e.keyCode);
});

Keypress events do detect arrow keys, but not in all browsers. So it's better to use keydown.

These are keycodes you should be getting in your console log:

  • left = 37
  • up = 38
  • right = 39
  • down = 40
Christian Heinrichs
  • 786
  • 1
  • 9
  • 28
Harsha Venkataramu
  • 2,887
  • 1
  • 34
  • 58
  • It doesn't work for me on chrome. keydown works Quoted from http://api.jquery.com/keypress/ Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice. – Harsha Venkataramu Oct 13 '13 at 16:28
  • 2
    keypress may fire in some browser with arrow keys, you are right but it will act differently in others so its much better to use keydown. – Shlomi Hassid Oct 13 '13 at 16:29
  • I didn't mention I only tested this on Firefox. And no, `keypress` shows me 40 and 38 just like `keydown`. – Christian Heinrichs Oct 13 '13 at 16:29
10

You can check wether an arrow key is pressed by:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) 
      alert( "arrowkey pressed" );          
});

jsfiddle demo

suhailvs
  • 20,182
  • 14
  • 100
  • 98
5
left = 37,up = 38, right = 39,down = 40

$(document).keydown(function(e) {
switch(e.which) {
    case 37:
    $( "#prev" ).click();
    break;

    case 38:
    $( "#prev" ).click();
    break;

    case 39:
    $( "#next" ).click();
    break;

    case 40:
    $( "#next" ).click();
    break;

    default: return;
}
e.preventDefault();

});

Bhaskara Arani
  • 1,556
  • 1
  • 26
  • 44
  • Thank you for your response. To make this a usable answer, please consider adding some explanation as to what your code snippet does, why it is correct, and what I was doing wrong in the initial question. – RedBassett Mar 15 '18 at 20:37
  • $('html') change it to $(document) and change keypress to keydown – Bhaskara Arani Mar 16 '18 at 14:30
2

Please refer the link from JQuery

http://api.jquery.com/keypress/

It says

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

That means you can not use keypress in case of arrows.

Tatha
  • 127
  • 1
  • 14
-1
$(document).on( "keydown",  keyPressed);

function keyPressed (e){
    e = e || window.e;
    var newchar = e.which || e.keyCode;
    alert(newchar)
}
Bhary
  • 567
  • 6
  • 13