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?

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 .

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.

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>

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

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

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

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.