jQuery keypress left/right navigation [duplicate]

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.

Merwin

Answer 1

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

Sacker

Shouldn't we use which instead of keyCode now with jQuery ? – Wizardry

I don't know, but look at the demo on api.jquery.com/keydown There, e.keyCode is used. – Sacker

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) – Yankeeism

It also better to use on('keydown' than 'keydown', if I'm not mistaken. – Attenuation

Answer 2

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

Incomparable

If we use "which" den its enough – Less

Answer 3

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

Gelb

If we use "which" in the pure Jquery world – Less

Answer 4

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
    }
});

Autotransformer

Answer 5

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];

});

Basketwork