Mendeteksi perubahan nilai input [type = text] di jQuery

159

Saya ingin menjalankan fungsi setiap kali nilai kotak input tertentu berubah. Ini hampir berfungsi $('input').keyup(function), tetapi tidak ada yang terjadi ketika menempelkan teks ke dalam kotak, misalnya. $input.change(function)hanya terpicu ketika input kabur, jadi bagaimana saya akan segera tahu kapan kotak teks telah berubah nilainya?

Jeriko
sumber
2
Jadi mengapa tidak mengikat keduanya keyupdan pasteacara?
Ilia G
devcurry.com/2009/07/... - Mendeteksi peristiwa cut / copy / paste
BeRecursive
2
@ liho1eye pastehanyalah salah satu yang saya pikirkan, saya lebih suka mendengarkan perubahan definitif daripada harus memikirkan semua jalur masuk yang berbeda.
Jeriko
@ Jeriko Itulah satu-satunya nilai dua cara yang dapat diubah (di samping pembaruan yang jelas melalui kode js).
Ilia G
Anda juga ingin menangkap Ctlr-X ( cut).
Alexis Wilke

Jawaban:

344

cukup remenber bahwa 'on' direkomendasikan atas fungsi 'bind', jadi selalu coba gunakan pendengar acara seperti ini:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});
Alejandro Silva
sumber
Mengapa demikian paste? Pertama saya pikir itu hanya berfungsi jika kita menempelkan sesuatu dengan CTRL+V.
Hitam
3
@ NicolasS.Xu: penetapan nilai langsung tidak memicu peristiwa DOM apa pun
Alejandro Silva
Akan lebih baik jika menggunakan console.log()bukan alert. Akan sangat mengganggu untuk keyup alert.
cytsunny
4
@cytsunny ya tentu saja, waspada mengganggu, tetapi dalam hal ini adalah contoh dari kode yang akan dieksekusi pada perubahan nilai, itu benar-benar dapat menjadi muatan yang Anda inginkan.
Alejandro Silva
1
Jika Anda mengklik kanan dan menempel, ini akan mengembalikan nilai input sebelum menempel.
alstr
104

Deskripsi

Anda dapat melakukan ini menggunakan .bind()metode jQuery . Lihat jsFiddle .

Sampel

Html

<input id="myTextBox" type="text"/>

jQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

Informasi Lebih Lanjut

dknaack
sumber
6

Anda juga dapat menggunakan acara kotak teks -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Coba ini

Ishan Jain
sumber
5

Coba ini:

Pada dasarnya, cukup akun untuk setiap acara:

Html:

<input id = "textbox" type = "text">

Jquery:

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
}); 
H Bellamy
sumber
3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

pilih untuk saran browser

mohamad yazdanpanah
sumber
2

Coba ini:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})
Hamed Khosravi
sumber
0

Gunakan ini: https://github.com/gilamran/JQuery-Plugin-AnyChange

Ini menangani semua cara untuk mengubah input, termasuk menu konten (Menggunakan mouse)

gilamran
sumber
Bagaimana kamu menggunakannya? Saya memasukkannya dalam HTML saya dan menggunakan $ ("input"). AnyChange (fungsi (e) {console.log (e);}); Tapi itu tidak pernah sampai ke baris console.log
Ofer Gal
0

Kombinasi acara ini berhasil untuk saya:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});
Nole
sumber
0

JANGAN LUPA cutatau selectACARA!

Jawaban yang diterima hampir sempurna, tetapi lupa tentang cutdan selectperistiwa.

cut dipecat saat pengguna memotong teks (CTRL + X atau melalui klik kanan)

select dipecat ketika pengguna memilih opsi yang disarankan browser

Anda harus menambahkannya juga, seperti:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
Oscar Chambers
sumber