41

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.

0

5 Answers 5

96
$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $("#showroom").animate({
      left: "-=980"
    });
  }
  else if(e.keyCode == 39) { // right
    $("#showroom").animate({
      left: "+=980"
    });
  }
});
4
  • 7
    Shouldn't we use which instead of keyCode now with jQuery ?
    – Shikiryu
    Nov 5, 2010 at 8:51
  • I don't know, but look at the demo on api.jquery.com/keydown There, e.keyCode is used. Nov 5, 2010 at 9: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, 2014 at 23:12
  • It also better to use on('keydown' than 'keydown', if I'm not mistaken.
    – Scalpweb
    Oct 12, 2015 at 16:22
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
    }   
});
1
  • If we use "which" den its enough
    – GOK
    Jul 27, 2012 at 12:26
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();
    }
});
1
  • 1
    If we use "which" in the pure Jquery world
    – GOK
    Jul 27, 2012 at 12:27
1

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

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

});

Not the answer you're looking for? Browse other questions tagged or ask your own question.