jQuery keypress navigation gauche/droite [dupliquer]

cette question a déjà une réponse ici:

je veux donner à mon curseur de contenu la possibilité de répondre à la fonction keypress (touche Flèche gauche et touche Flèche droite). J'ai lu sur certains conflits entre plusieurs navigateurs et les systèmes d'exploitation.

L'utilisateur peut naviguer dans le contenu alors qu'il est sur le site (corps).

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

j'ai besoin d'une solution sans conflits croisés (navigateurs, OSs).

37
demandé sur Derek 朕會功夫 2010-11-05 10:32:27

5 réponses 

$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $("#showroom").animate({
      left: "-=980"
    });
  }
  else if(e.keyCode == 39) { // right
    $("#showroom").animate({
      left: "+=980"
    });
  }
});
89
répondu elektronikLexikon 2010-11-05 08:40:36 
$("body").keydown(function(e){
    // left arrow
    if ((e.keyCode || e.which) == 37)
    {   
        // do something
    }
    // right arrow
    if ((e.keyCode || e.which) == 39)
    {
        // do something
    }   
});
15
répondu Jiří Melčák 2012-07-16 18:06:23

cela me va très bien: 

$(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();
    }
});
6
répondu Erwan 2012-07-27 11:28:13

je préfère utiliser ce modèle: 

$(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
répondu Jacob Smith 2014-11-10 17:49:49

l'utilisation de l'expression des fonctions nommées peut aider à garder un code plus propre: 

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

});
1
répondu Tom Ah 2015-05-30 15:57:10