Menangkap "Hapus" Keypress dengan jQuery

118

Saat menggunakan kode contoh dari dokumentasi jQuery untuk event handler penekanan tombol, saya tidak dapat menangkap Deletekuncinya. Potongan di bawah ini akan masuk ke log 0ketika Deletetombol ditekan di FireFox:

$(document).keypress(function(e) {
    console.log(e.which);       
});

Sepertinya pasti ada cara untuk menangkap Deletekuncinya, tapi itu istilah yang ambigu sehingga Google tidak terbukti banyak membantu dengan itu.

Shane H.
sumber

Jawaban:

202

Anda tidak boleh menggunakan keypressacara, tetapi acara keyupatau keydownkarena keypressacara tersebut ditujukan untuk karakter nyata (dapat dicetak). keydownditangani di tingkat yang lebih rendah sehingga akan menangkap semua kunci noncetak seperti deletedan enter.

Philippe Leybaert
sumber
keyupakan melakukan pekerjaan dengan lebih baik.
localhoost
2
@atilkan tidak, pengguna mengharapkan umpan balik keydown, bukan keyup. Semua editor teks melakukan tindakan saat tombol ditekan, bukan saat dilepaskan.
Philippe Leybaert
1
@PhilippeLeybaert Dalam kasus saya, program tidak dapat menangkap karakter yang ditekan terakhir.
localhoost
82
$('html').keyup(function(e){
    if(e.keyCode == 46) {
        alert('Delete key released');
    }
});

Sumber: kode kunci char kode javascript dari www.cambiaresearch.com

Tod Palin
sumber
18
Seharusnya begitu alert('Delete Key Released').
Waldheinz
jika seseorang menggunakan penekanan tombol alih-alih keyup yang disarankan oleh Tod maka Anda akan mendapatkan kode kunci == 46 acara melawan. kunci (titik). tetapi berfungsi dengan baik dengan keyUp. Terima kasih
Mubashar
34

Kode Kunci Javascript

  • e.keyCode == 8 untukbackspace
  • e.keyCode == 46 untuk tombol forward backspaceatau deletedi PC

Kecuali detail jawaban Colin & Tod ini berhasil.

csonuryilmaz.dll
sumber
4
Seharusnya e.keyCode dan bukan e.KeyCode
Jerome
16

event.key === "Hapus"

Lebih baru dan lebih bersih: gunakan event.key. Tidak ada lagi kode angka yang berubah-ubah!

CATATAN: Properti lama ( .keyCodedan .which) tidak digunakan lagi.

document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Delete") {
        // Do things
    }
});

Mozilla Docs

Browser yang Didukung

Gibolt
sumber