Mengikat tombol panah di JS / jQuery

Bagaimana cara saya mengikat fungsi ke tombol panah kiri dan kanan dalam Javascript dan / atau jQuery? Saya melihat plugin js-hotkey untuk jQuery (membungkus fungsi bind built-in untuk menambahkan argumen untuk mengenali kunci tertentu), tetapi sepertinya tidak mendukung tombol panah.

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

Jika Anda perlu mendukung IE8, mulai fungsi sebagai e = e || window.event; switch(e.which || e.keyCode) {.

(sunting 2020)
Catatan yang KeyboardEvent.whichsekarang sudah usang. Lihat contoh ini menggunakanKeyboardEvent.key solusi yang lebih modern untuk mendeteksi tombol panah.

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

Kode karakter:

37 - kiri

38 - lebih

39 - benar

40 - turun

Anda dapat menggunakan kode kunci tombol panah (37, 38, 39 dan 40 untuk kiri, atas, kanan dan bawah):

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

Lihat contoh di atas di sini .

Ini agak terlambat, tetapi HotKeys memiliki bug yang sangat besar yang menyebabkan acara dieksekusi beberapa kali jika Anda memasang lebih dari satu hotkey ke suatu elemen. Cukup gunakan jQuery biasa.

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

Saya hanya menggabungkan bit terbaik dari jawaban lain:

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

Anda dapat menggunakan KeyboardJS. Saya menulis perpustakaan untuk tugas-tugas seperti ini.

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

Lihat perpustakaan di sini => http://robertwhurst.github.com/KeyboardJS/

Solusi singkat menggunakan Javascript biasa (terima kasih kepada Sygmoral untuk perbaikan yang disarankan):

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

Lihat juga https://stackoverflow.com/a/17929007/1397061 .

Apakah Anda yakin jQuery.HotKeys tidak mendukung tombol panah? Saya telah mengacaukan demo mereka sebelumnya dan mengamati bekerja di kiri, kanan, atas, dan bawah ketika saya mengujinya di IE7, Firefox 3.5.2, dan Google Chrome 2.0.172 ...

EDIT : Tampaknya jquery.hotkeys telah dipindahkan ke Github: https://github.com/jeresig/jquery.hotkeys

Alih-alih menggunakan return false;seperti pada contoh di atas, Anda dapat menggunakan e.preventDefault();yang melakukan hal yang sama tetapi lebih mudah dipahami dan dibaca.

Contoh js murni dengan ke kanan atau kiri

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

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

            }
        });

Anda dapat menggunakan jQuery bind:

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

Anda dapat memeriksa apakah suatu arrow keyditekan oleh:

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

Mencegah panah hanya tersedia untuk objek lain SELECT, well sebenarnya saya belum menguji pada objek lain LOL. tapi itu bisa menghentikan panah event di halaman dan tipe input.

saya sudah mencoba untuk memblokir panah kiri dan kanan untuk mengubah nilai objek SELECT menggunakan "e.preventDefault ()" atau "return false" pada acara "kepress" "keydown" dan "keyup" tetapi masih mengubah nilai objek. tetapi acara tersebut masih memberi tahu Anda bahwa panah ditekan.

Pustaka Javascript yang kuat untuk mengambil input keyboard dan kombinasi tombol dimasukkan. Tidak memiliki dependensi.

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

Saya datang ke sini mencari cara sederhana untuk membiarkan pengguna, ketika fokus pada input, gunakan tombol panah untuk memberi +1 atau -1 input numerik. Saya tidak pernah menemukan jawaban yang baik tetapi membuat kode berikut ini yang tampaknya bekerja dengan baik - membuat situs ini sekarang luas.

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

Dengan kopi & Jquery

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