Mengikat tombol panah di JS / jQuery


418

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.


Jawaban:


541
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.


28
Sejauh ini jawaban terbaik. Penggunaan e.whichseperti jQuery merekomendasikan untuk lintas-browser, menggunakan e.preventDefault()alih-alih return false( return falsepada event handler jQuery memicu keduanya e.preventDefault()dan e.stopPropagation(), yang kedua akan menyebabkan acara yang ditambahkan kemudian gagal karena acara tidak akan menyebar ke mereka), dan pada akhir saklar, akan kembali tanpa memanggil e.preventDefault()jika itu adalah kunci selain yang sedang dicari untuk tidak menghalangi penggunaan kunci lain, dan bukannya $.ui.keyCode.DOWNmembandingkan dengan angka (JAUH lebih cepat).
Jimbo Jonny

2
Nathan: sepertinya tidak semua kode kunci konsisten di antara peramban, tetapi tombol panah adalah beberapa di antaranya. Lihat di sini: stackoverflow.com/questions/5603195/…
Sygmoral

1
@MichaelScheper - 1) variabel! = Konstanta, terlepas dari apakah mereka dimaksudkan untuk diubah atau tidak ... mesin masih harus memperlakukan mereka seperti vars sampai konstanta ES6 cukup banyak sehingga jQuery dapat menggunakan konstanta 2) angka tidak angka yang benar-benar ajaib ketika ada komentar tepat di samping mereka mengatakan dengan tepat apa mereka, dan 3) ... melanjutkan
Jimbo Jonny

2
... 3) ketika mengakses $.ui.keyCode.DOWNAnda mencari $dalam lingkup leksikal Anda, tidak menemukannya, naik tingkat ... mencari $, ulangi sampai dalam lingkup global, temukan di global window, akses $pada jendela, akses uipada jendela, akses pada window.$, akses keyCodepada window.$.ui, akses DOWNpada window.$.ui.keyCodeuntuk mendapatkan nilai primitif Anda ingin membandingkan, kemudian melakukan yang sebenarnya Anda membandingkan. Apakah kecepatan itu penting bagi Anda atau tidak adalah keputusan pribadi, saya hanya memiliki kecenderungan untuk menghindari 4 tingkat akses ketika ada situasi di mana saya dapat dengan mudah menulis / berkomentar primitif.
Jimbo Jonny

1
@NathanArthur Di sini saya menemukan dua alat daring yang bagus untuk menguji kode kunci papan ketik: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
Riccardo Volpe

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

Kode karakter:

37 - kiri

38 - lebih

39 - benar

40 - turun


4
Apakah ada tujuan pengembalian?
Alex S

19
Itu menghentikan kejadian keydown lebih lanjut yang sedang dipukul.
s_hewitt

9
Shadow: tidak, maksudnya itu menghentikan acara keydown dari menembaki elemen DOM lainnya
JasonWoof

3
Kecuali 39 juga apostrof, bukan?
Paul D. Waite

25
Saat menggunakan jQuery, gunakan e.whichdaripada e.keyCodeuntuk lebih banyak dukungan browser. Lihat komentar saya di bawah.
Sygmoral

108

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 .


1
Saya tidak yakin tentang penggunaan Anda atas || operator di jalur 2. Bukankah nilai selain nol atau bukan nol implementasi spesifik dan tidak dijamin? Saya akan menggunakan sesuatu yang lebih seperti: var keyCode = (e.keyCode? E.keyCode: e.which); +1 untuk penggunaan objek panah untuk memberikan kasing kasus nama.
Mnebuerquo

6
Jika Anda menggunakan jQuery, Anda tidak perlu menguji e.which: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM

Saya mencoba untuk menempatkan pendengar acara utama di atas meja, tetapi tidak berhasil. Apakah ada sejumlah jenis pemilih yang mendukung pendengar acara utama?
Arman Bimatov

23

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

2
+1 untuk menggunakan objek kode kunci ui. Jauh lebih mudah dipahami daripada 37, 38, 39, atau 40. Tidak yakin mengapa jawaban teratas menggunakan e.keyCode ketika dokumentasi jQuery secara eksplisit menyatakan untuk menggunakan e.yang bertanggung jawab atas perbedaan browser. Semoga jawaban ini mendapat pengakuan lebih untuk melakukannya dengan benar.
Tidak ada

2
Menggunakan $ .ui.keyCode.DOWN pada setiap tombol tekan adalah BANYAK lebih lambat daripada menggunakan nomor. Tambahkan saja komentar jika khawatir tentang kejelasan, terutama karena harus dijalankan setiap kali tombol ditekan.
Jimbo Jonny

16

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

1
Dari mana "ui" berasal? Mendapatkan "TypeError: $ .ui tidak terdefinisi" EDIT - Saya kehilangan UI JQuery. Sudah dimuat - tidak ada lagi kesalahan.
seorang coder

3
Dia rupanya juga menggunakan jQuery UI yang harus memiliki enum itu. Saya tidak akan memasukkan jQuery UI hanya untuk itu, btw.
Jethro Larson

14

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/


14

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 .


Mungkin juga layak untuk diikat melaluidocument.addEventListener('keydown', myFunction);
nathanbirrell

9

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


Saya sedang membaca di mana dikatakan berdasarkan perpustakaan lain, dan berasumsi bahwa daftar kunci yang didukung masih berlaku.
Alex S


4

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) {

            }
        });

3

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

2

Anda dapat memeriksa apakah suatu arrow keyditekan oleh:

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

0

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.


0

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

0

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

-1

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()
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.