jQuery keypress left/right navigation

Question

I want to give my content slider the ability to respond to keypress (LEFT ARROW key and RIGHT ARROW key) feature. I have read about some conflicts between several browsers and operation systems.

The user can navigate the content while he is on the global website (body).

Pseudo Code:

ON Global Document

IF Key Press LEFT ARROW

THEN animate #showroom css 'left' -980px


IF Key Press RIGHT ARROW

THEN animate #showroom css 'left' +980px

I need a solution without any crossover (Browsers, OSs) conflicts.

score 96 · Accepted Answer · answered Nov 05 '10 at 08:40

96

$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $("#showroom").animate({
      left: "-=980"
    });
  }
  else if(e.keyCode == 39) { // right
    $("#showroom").animate({
      left: "+=980"
    });
  }
});

answered Nov 05 '10 at 08:40

Flo Edelmann

2,573
1
20
33

7

Shouldn't we use `which` instead of `keyCode` now with jQuery ? – Shikiryu Nov 05 '10 at 08:51
I don't know, but look at the demo on http://api.jquery.com/keydown/ There, e.keyCode is used. – Flo Edelmann Nov 05 '10 at 09:03
yes, you should use .which() to get the keycode. The exception is if you're trying to get raw text input prior to any normalisation (I guess this means things like detecting the £ key rather than simply the £ character) – carpii Dec 27 '14 at 23:12
It also better to use on('keydown' than 'keydown', if I'm not mistaken. – Scalpweb Oct 12 '15 at 16:22

score 15 · Answer 2 · answered Jul 16 '12 at 18:06

15

$("body").keydown(function(e){
    // left arrow
    if ((e.keyCode || e.which) == 37)
    {   
        // do something
    }
    // right arrow
    if ((e.keyCode || e.which) == 39)
    {
        // do something
    }   
});

answered Jul 16 '12 at 18:06

Jiří Melčák

150
1
6

If we use "which" den its enough – GOK Jul 27 '12 at 12:26

score 6 · Answer 3 · answered Jul 27 '12 at 11:28

6

This works fine for me :

$(document).keypress(function (e){ 
    if(e.keyCode == 37) // left arrow
    {
        // your action here, for example
        $('#buttonPrevious').click();
    }
    else if(e.keyCode == 39)    // right arrow
    { 
        // your action here, for example
        $('#buttonNext').click();
    }
});

answered Jul 27 '12 at 11:28

Erwan

2,512
1
24
17

1

If we use "which" in the pure Jquery world – GOK Jul 27 '12 at 12:27

Jacob Smith · Answer 4 · 2014-11-10T17:49:49.587

I prefer using this template:

$(document).keypress(function(e){
    switch((e.keyCode ? e.keyCode : e.which)){
        //case 13: // Enter
        //case 27: // Esc
        //case 32: // Space
        case 37:   // Left Arrow
            $("#showroom").animate({left: "+=980"});
        break;
        //case 38: // Up Arrow
        case 39:   // Right Arrow
            $("#showroom").animate({left: "-=980"});
        break;
        //case 40: // Down Arrow
    }
});

score 1 · Answer 5 · answered May 30 '15 at 15:57

The use of named functions expression may help to keep a cleaner code :

function go_left(){console.log('left');}
function go_up(){console.log('up');}
function go_right(){console.log('right');}
function go_down(){console.log('down');}


$(document).on('keydown',function(e){

   var act={37:go_left, 38:go_up, 39:go_right, 40:go_down};
   if(act[e.which]) var a=new act[e.which];

});

jQuery keypress left/right navigation

5 Answers5

Linked