Pendengar JavaScript, “penekanan tombol” tidak mendeteksi backspace?


141

Saya menggunakan keypresspendengar misalnya ..

addEventListener("keypress", function(event){

}

Namun, ini sepertinya tidak mendeteksi backspace yang menghapus teks ...

Apakah ada pendengar berbeda yang bisa saya gunakan untuk mendeteksi ini?

Jawaban:


167

Acara tombol ditekan dipanggil hanya untuk karakter kunci (dicetak), acara KeyDown dinaikkan untuk semua termasuk nonprintable seperti Control, Shift, Alt, BackSpace, dll

MEMPERBARUI:

Acara menekan tombol dipecat ketika tombol ditekan dan tombol itu biasanya menghasilkan nilai karakter

Referensi .


3
Tidak sepenuhnya benar: banyak tombol yang tidak dapat dicetak memadamkan keypressacara di banyak browser. Lihat unixpapa.com/js/key.html
Tim Down

Dalam versi Mozilla saat ini, backspace dan semua terdeteksi dalam acara penekanan tombol.
iniravpatel

70

Coba keydownalih-alih keypress.

Peristiwa Keyboard terjadi dalam urutan ini: keydown, keyup,keypress

Masalah dengan backspace mungkin adalah, bahwa browser akan menavigasi kembali keyupdan dengan demikian halaman Anda tidak akan melihat keypressacara tersebut.


Saya belum melihat ke standar, tetapi urutan acara (setidaknya di Firefox 37) tampaknya keydown keypress keyup. unixpapa.com/js/testkey.html
jxmallett

Tampaknya, untuk acara utama dalam input, karakter tidak muncul di lapangan sampai keyupacara dipecat.
jxmallett

Yang terakhir - Di iOS (8.2), tombol backspace hanya menjalankan suatu keydownperistiwa tetapi karakter tidak dihapus dari input sampai beberapa saat setelah itu.
jxmallett

ini jawabannya. ini menangkap tombol hapus tekan dan Ctrl + V keypress
user1709076

30

The keypressacara mungkin berbeda di seluruh browser.

Saya membuat Jsfiddle untuk membandingkan acara keyboard (menggunakan pintasan JQuery) di Chrome dan Firefox. Bergantung pada browser yang Anda gunakan untuk suatu keypressacara akan dipicu atau tidak - backspace akan memicu keydown/keypress/keyuppada Firefox tetapi hanya keydown/keyupdi Chrome.

Peristiwa keycick tunggal dipicu

di Chrome

  • keydown/keypress/keyupsaat browser mendaftarkan input keyboard ( keypressdiaktifkan)

  • keydown/keyup jika tidak ada input keyboard (diuji dengan alt, shift, backspace, tombol panah)

  • keydown hanya untuk tab?

di Firefox

  • keydown/keypress/keyupketika browser mendaftarkan input keyboard tetapi juga untuk backspace, tombol panah, tab (jadi di sini keypressdipecat bahkan tanpa input)

  • keydown/keyup untuk alt, bergeser


Ini seharusnya tidak mengejutkan karena menurut https://api.jquery.com/keypress/ :

Catatan: karena acara penekanan tombol tidak tercakup oleh spesifikasi resmi apa pun, perilaku sebenarnya yang ditemui saat menggunakannya mungkin berbeda di semua browser, versi browser, dan platform.

Penggunaan tipe acara penekanan tombol sudah ditinggalkan oleh W3C ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress )

Jenis peristiwa penekanan tombol ditentukan dalam spesifikasi ini untuk referensi dan kelengkapan, tetapi spesifikasi ini mencabut penggunaan jenis acara ini. Saat berada dalam konteks pengeditan, penulis dapat berlangganan ke acara masukan sebelumnya sebagai gantinya.


Terakhir, untuk menjawab pertanyaan Anda, Anda harus menggunakan keyupatau keydownmendeteksi backspace di seluruh Firefox dan Chrome.


Cobalah di sini:

$(".inputTxt").bind("keypress keyup keydown", function (event) {
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) {
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>


1
Jawaban yang luar biasa - kebanyakan untuk penjelasan tentang berbagai cara untuk menangani backspace di seluruh browser
Jivan

2
W3School sudah melakukannya: w3schools.com/jsref/...
Tân

1
Cuplikan Kode sangat membantu
John Gilmer

17

Sesuatu yang saya tulis memetikan siapa pun menemukan masalah dengan orang-orang memukul backspace sambil berpikir mereka berada di bidang formulir

window.addEventListener("keydown", function(e){
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') {
        e.preventDefault();
        alert('Prevent page from going back');
    }
});

8

Kontrol numerik saya:

function CheckNumeric(event) {
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) {
        return true;
    }
    else if (_key > 47 && _key < 58) {
        return true;
    }
    else {
        return false;
    }
}

<input type="text" onkeydown="return CheckNumerick(event);" />

Cobalah

Kode kunci BackSpace adalah 8


6

event.key === "Backspace"

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

note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});

Mozilla Docs

Browser yang Didukung


1
Di tahun 2018 ini adalah cara terbaik untuk melakukannya!
tfantina

Saya telah menggunakan kode kunci 8 untuk backspace di setiap bahasa yang saya gunakan. Pelajari kode ASCII, tidak sembarangan.
André Werlang

3
Hanya karena Anda telah menggunakan bukan berarti tidak ada pilihan yang lebih baik. .keysaat ini merupakan opsi yang direkomendasikan oleh dokumen. Selain itu, mendukung berbagai keyboard internasional dengan pemetaan yang berbeda untuk setiap kunci yang diberikan. Mereka tidak sewenang - wenang dalam arti bahwa mereka diperbaiki, tetapi mereka ketika membaca kode
Gibolt

2

Gunakan salah satu dari kejadian keyup / keydown / beforeinput sebagai gantinya.

berdasarkan referensi ini , penekanan tombol sudah usang dan tidak lagi direkomendasikan.

Acara menekan tombol dipecat ketika kunci yang menghasilkan nilai karakter ditekan. Contoh kunci yang menghasilkan nilai karakter adalah tombol alfabet, numerik, dan tanda baca. Contoh kunci yang tidak menghasilkan nilai karakter adalah kunci pengubah seperti Alt, Shift, Ctrl, atau Meta.

jika Anda menggunakan "sebelum masukan" hati-hati tentang kompatibilitas Browser . perbedaan antara "beforeinput" dan dua lainnya adalah bahwa "beforeinput" dipecat ketika nilai input hendak diubah, jadi dengan karakter yang tidak dapat mengubah nilai input, itu tidak dipecat (misalnya shift, ctr, alt).

Saya memiliki masalah yang sama dan dengan menggunakan keyup itu diselesaikan.

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.