Mendeteksi backspace dan del pada acara "masukan"?

95

Bagaimana cara melakukannya?

Saya mencoba:

var key = event.which || event.keyCode || event.charCode;

if(key == 8) alert('backspace');

tapi tidak berhasil ...

Jika saya melakukan hal yang sama pada acara penekanan tombol, itu berhasil, tetapi saya tidak ingin menggunakan penekanan tombol karena menampilkan karakter yang diketik di bidang masukan saya. Saya harus bisa mengendalikannya


kode saya:

  $('#content').bind('input', function(event){

    var text = $(this).val(),
        key = event.which || event.keyCode || event.charCode;

    if(key == 8){
      // here I want to ignore backspace and del
    }

    // here I'm doing my stuff
    var new_text = 'bla bla'+text;
    $(this).val(new_text);
  });

tidak ada karakter yang harus ditambahkan dalam masukan saya, selain yang saya tambahkan dengan val () sebenarnya masukan dari pengguna harus sepenuhnya diabaikan, hanya tindakan menekan tombol yang penting bagi saya

Alex
sumber
3
Anda sebenarnya tidak perlu melakukan or'ing - event.which sudah cukup, jQuery menormalkan objek event untuk Anda. Lihat api.jquery.com/category/events/event-object
Niko
Anda seharusnya meletakkan nama acara sebagai argumen pertama .bind, bukan pemilih. Harus$('content').bind('keypress', ...
pmrotule

Jawaban:

123

Gunakan .onkeydowndan batalkan penghapusan dengan return false;. Seperti ini:

var input = document.getElementById('myInput');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
};

Atau dengan jQuery, karena Anda menambahkan tag jQuery ke pertanyaan Anda:

jQuery(function($) {
  var input = $('#myInput');
  input.on('keydown', function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
  });
});

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Wouter J
sumber
19
Bagaimana jika Anda ingin menangkap masukan dari klik kanan> tempel?
ctb
6
keydowntidak berfungsi di Chrome Android, ia mengembalikan kekosongan saat mengklik backspace atau del
Kosmetika
2
Dalam fungsinya kita harus menyimpan event sebagai parameter maka hanya itu yang akan bekerja seperti function (event) -------------------------- var input = document. getElementById ('myInput'); input.onkeydown = fungsi (peristiwa) {var key = event.keyCode || event.charCode; if (key == 8 || key == 46) return false; };
Anurag_BEHS
1
dengan jQuery itu secara internal memfilter enterdan backspacetombol pada inputperistiwa, dan penekanan tombol ini tidak mencapainya
vsync
@ Wouter - Bukan itu masalah besar, tapi saya pikir ada kesalahan ketik dalam kode untuk jquery. Saya rasa Anda bermaksud menambahkan nama parameter "event" ke event handler on-keydown.
RoboBear
14

Dengan jQuery

The event.which properti menormalkan event.keyCode dan event.charCode. Dianjurkan untuk menonton acara yang untuk input tombol keyboard.

http://api.jquery.com/event.which/

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});
SerzN1
sumber
2
Saya telah menggunakan jQuery sejak lama, tetapi belum pernah melihat ini. Selalu baik untuk mempelajari sesuatu yang baru. +1!
Sablefoste
10

event.key === "Backspace"

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

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Mozilla Docs

Browser yang Didukung

Gibolt
sumber
Kadang-kadang event.key mengembalikan "Proses" karena alasan yang saya tidak mengerti ...
Oscar Chambers
Itu adalah browser yang didukung. Anda mungkin memiliki bug, atau mungkin keyboard kustom Anda tidak mengaktifkan peristiwa keydown
Gibolt
3

Sudahkah Anda mencoba menggunakan 'onkeydown'? Ini adalah acara yang Anda cari.

Ini beroperasi sebelum input dimasukkan dan memungkinkan Anda untuk membatalkan input karakter.

iMoses
sumber
tapi bagaimana cara membatalkannya? karena saya menggunakan val () pada input dan masih menambahkan karakter yang diketik
Alex
3
Bagaimana dengan event.preventDefault()?
Niko
Anda dapat dengan mudah return false;membatalkan acara apa pun saat menggunakan jQuery.
iMoses
3

Ini pertanyaan lama, tetapi jika Anda ingin menangkap kejadian backspace pada input, dan bukan keydown, keypress, atau keyup — seperti yang saya perhatikan salah satu dari fungsi-fungsi tertentu yang saya tulis dan menyebabkan penundaan yang canggung dengan pemformatan teks otomatis —Anda dapat menangkap backspace menggunakan inputType:

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});
Brandon McConnell
sumber
3

keydown dengan event.key === "Backspace" or "Delete"

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

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Gaya modern:

input.addEventListener('keydown', ({key}) => {
    if (["Backspace", "Delete"].includes(key)) {
        return false
    }
})

Mozilla Docs

Browser yang Didukung

Gibolt
sumber
2
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});
Phanikumar Jatavallabhula
sumber
1
Kode Kunci 8 untuk "BackSpace"
Phanikumar Jatavallabhula
Pertanyaannya adalah tentang backspace dan delete, bukan backspace dan enter.
Paul
0
//Here's one example, not sure what your application is but here is a relevant and likely application 
function addDashesOnKeyUp()
{
    var tb = document.getElementById("tb1"); 
    var key = event.which || event.keyCode || event.charCode;

    if((tb.value.length ==3 || tb.value.length ==7 )&& (key !=8) ) 
    {
        tb.value += "-"
    } 
}
pengguna2125311
sumber
0

pada perangkat android yang menggunakan chrome kami tidak dapat mendeteksi backspace. Anda dapat menggunakan solusi untuk itu:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })
Aafaq Ahmad
sumber
Saya benar-benar tidak ingin ini menjadi jawabannya, tetapi tampaknya demikian, karena mereka menetapkan whichdan keyCodeke 229. Pasti ada cara yang lebih baik, atau cara yang lebih baik segera hadir, tetapi pada dasarnya saya akan menggunakan ini untuk saat ini. ..
JohnnyFun