JS / jQuery'de ok tuşlarını bağlama

Javascript ve / veya jQuery'de bir işlevi sol ve sağ ok tuşlarına bağlama hakkında nasıl bilgi verebilirim? JQuery için js-hotkey eklentisine baktım (belirli tuşları tanımak için bir argüman eklemek için yerleşik bağlama işlevini sarar), ancak ok tuşlarını desteklemiyor gibi görünüyor.

document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};

IE8'i desteklemeniz gerekiyorsa, işlev gövdesini olarak başlatın e = e || window.event; switch(e.which || e.keyCode) {.

(düzenleme 2020)
Not KeyboardEvent.whichartık uygun bulunmamaktadır. Ok tuşlarını algılamak için daha modern bir çözüm için bu örneğeKeyboardEvent.key bakın .

$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

Karakter kodları:

37 - sol

38 - üstü

39 - sağ

40 - aşağı

Ok tuşlarının keyCode'unu kullanabilirsiniz (sol, yukarı, sağ ve aşağı için 37, 38, 39 ve 40):

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

Yukarıdaki örneği buradan kontrol edin .

Bu biraz geç, ancak HotKeys, bir öğeye birden fazla kısayol tuşu eklerseniz olayların birden çok kez yürütülmesine neden olan çok büyük bir hataya sahiptir. Sadece düz jQuery kullanın.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

Diğer cevapların en iyi bitlerini birleştirdim:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});

KeyboardJS'yi kullanabilirsiniz. Kütüphaneyi böyle işler için yazdım.

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

Kütüphaneye buradan göz atın => http://robertwhurst.github.com/KeyboardJS/

Düz Javascript kullanan kısa bir çözüm (önerilen iyileştirmeler için Sygmoral sayesinde):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

Ayrıca bkz. Https://stackoverflow.com/a/17929007/1397061 .

JQuery.HotKeys'in ok tuşlarını desteklemediğinden emin misiniz? Daha önce demolarıyla uğraştım ve IE7, Firefox 3.5.2 ve Google Chrome 2.0.172'de test ettiğimde sol, sağ, yukarı ve aşağı çalışırken gözlemledim ...

EDIT : Görünüşe göre jquery.hotkeys Github'a taşındı: https://github.com/jeresig/jquery.hotkeys

return false;Yukarıdaki örneklerde olduğu gibi kullanmak yerine , bunu e.preventDefault();yapan ancak anlaşılması ve okunması daha kolay olanı kullanabilirsiniz.

Sağa veya sola giden saf js örneği

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

JQuery bağlama kullanabilirsiniz:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

Bir tuşunun arrow keybasılı olup olmadığını kontrol edebilirsiniz :

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});

ok sadece başka herhangi bir nesne için kullanılabilir önlemek SEÇ, iyi aslında ben başka bir nesne LOL tes yok. ancak sayfadaki ok olayını ve giriş türünü durdurabilir.

zaten "kepress" "keydown" ve "keyup" olayında "e.preventDefault ()" veya "return false" kullanarak SELECT nesnesinin değerini değiştirmek için sol ve sağ oku engellemeye çalışıyorum ama yine de nesne değerini değiştiriyor. ancak olay hala okun basılı olduğunu söylüyor.

Girilen klavye girişini ve tuş kombinasyonlarını yakalamak için sağlam bir Javascript kütüphanesi. Bağımlılığı yoktur.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

Buraya, kullanıcının bir girişe odaklandığında sayısal bir girişi + 1 veya -1 yapmak için ok tuşlarını kullanmasına izin vermek için basit bir yol aramaya geldim. Asla iyi bir cevap bulamadım ama harika çalışıyor gibi görünen aşağıdaki kodu yaptı - şimdi bu site çapında yapma.

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

Kahve ve Jquery ile

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()