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.
javascript
jquery
keyboard
key-bindings
Alex S
sumber
sumber
Jawaban:
Jika Anda perlu mendukung IE8, mulai fungsi sebagai
e = e || window.event; switch(e.which || e.keyCode) {
.(sunting 2020)
Catatan yang
KeyboardEvent.which
sekarang sudah usang. Lihat contoh ini menggunakanKeyboardEvent.key
solusi yang lebih modern untuk mendeteksi tombol panah.sumber
e.which
seperti jQuery merekomendasikan untuk lintas-browser, menggunakane.preventDefault()
alih-alihreturn false
(return false
pada event handler jQuery memicu keduanyae.preventDefault()
dane.stopPropagation()
, yang kedua akan menyebabkan acara yang ditambahkan kemudian gagal karena acara tidak akan menyebar ke mereka), dan pada akhir saklar, akan kembali tanpa memanggile.preventDefault()
jika itu adalah kunci selain yang sedang dicari untuk tidak menghalangi penggunaan kunci lain, dan bukannya$.ui.keyCode.DOWN
membandingkan dengan angka (JAUH lebih cepat).$.ui.keyCode.DOWN
Anda mencari$
dalam lingkup leksikal Anda, tidak menemukannya, naik tingkat ... mencari$
, ulangi sampai dalam lingkup global, temukan di globalwindow
, akses$
pada jendela, aksesui
pada jendela, akses padawindow.$
, akseskeyCode
padawindow.$.ui
, aksesDOWN
padawindow.$.ui.keyCode
untuk 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.Kode karakter:
sumber
e.which
daripadae.keyCode
untuk lebih banyak dukungan browser. Lihat komentar saya di bawah.Anda dapat menggunakan kode kunci tombol panah (37, 38, 39 dan 40 untuk kiri, atas, kanan dan bawah):
Lihat contoh di atas di sini .
sumber
The event.which property normalizes event.keyCode and event.charCode
- api.jquery.com/event.whichIni 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.
sumber
Saya hanya menggabungkan bit terbaik dari jawaban lain:
sumber
Anda dapat menggunakan KeyboardJS. Saya menulis perpustakaan untuk tugas-tugas seperti ini.
Lihat perpustakaan di sini => http://robertwhurst.github.com/KeyboardJS/
sumber
Solusi singkat menggunakan Javascript biasa (terima kasih kepada Sygmoral untuk perbaikan yang disarankan):
Lihat juga https://stackoverflow.com/a/17929007/1397061 .
sumber
document.addEventListener('keydown', myFunction);
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
sumber
Alih-alih menggunakan
return false;
seperti pada contoh di atas, Anda dapat menggunakane.preventDefault();
yang melakukan hal yang sama tetapi lebih mudah dipahami dan dibaca.sumber
return false;
dane.preventDefault();
tidak persis sama. Lihat stackoverflow.com/a/1357151/607874Contoh js murni dengan ke kanan atau kiri
sumber
Anda dapat menggunakan jQuery bind:
sumber
Anda dapat memeriksa apakah suatu
arrow key
ditekan oleh:sumber
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.
sumber
Pustaka Javascript yang kuat untuk mengambil input keyboard dan kombinasi tombol dimasukkan. Tidak memiliki dependensi.
http://jaywcjlove.github.io/hotkeys/
sumber
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.
sumber
Dengan kopi & Jquery
sumber