web-dev-qa-db-ja.com

jQueryキープレスの左/右ナビゲーション

コンテンツスライダーにキー押下（左矢印キーと右矢印キー）機能に応答する機能を提供したいと思います。複数のブラウザとオペレーティングシステム間の競合について読んだことがあります。

ユーザーは、グローバルWebサイト（本文）にいる間にコンテンツをナビゲートできます。

擬似コード：

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

クロスオーバー（ブラウザー、OS）の競合のないソリューションが必要です。

javascriptjquerykeyboardkeypressonkeypress
39
Tomkay
$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $("#showroom").animate({
      left: "-=980"
    });
  }
  else if(e.keyCode == 39) { // right
    $("#showroom").animate({
      left: "+=980"
    });
  }
});
91
Flo Edelmann
$("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
Jiří Melčák

これは私にとってはうまくいきます：

$(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
Erwan

私はこのテンプレートを使用することを好みます：

$(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
Jacob Smith

名前付き関数式を使用すると、コードを簡潔に保つことができます。

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
Tom Ah