acara perubahan jQuery textbox tidak menyala sampai textbox kehilangan fokus?


133

Saya menemukan bahwa acara perubahan jQuery di kotak teks tidak menyala sampai saya mengklik di luar kotak teks.

HTML:

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

JS:

$("#textbox").change(function() {alert("Change detected!");});

Lihat demo di JSFiddle

Aplikasi saya mengharuskan acara yang akan dipecat pada setiap perubahan karakter di kotak teks. Saya bahkan mencoba menggunakan keyup sebagai gantinya ...

$("#textbox").keyup(function() {alert("Keyup detected!");});

... tapi ini adalah fakta yang diketahui bahwa acara keyup tidak diaktifkan pada klik kanan dan tempel.

Ada solusi? Apakah kedua pendengar akan menyebabkan masalah?


^^ Ini. Anda dapat memiliki sebanyak mungkin penangan acara yang Anda inginkan.
Pasang kembali Monica Cellio

Jawaban:


298

Mengikat kedua peristiwa adalah cara khas untuk melakukannya. Anda juga dapat mengikat ke acara tempel.

Anda dapat mengikat ke beberapa acara seperti ini:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

Jika Anda ingin bertele-tele tentang itu, Anda juga harus mengikat mouseup untuk melayani menyeret teks, dan menambahkan lastValuevariabel untuk memastikan bahwa teks benar-benar berubah:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

Dan jika Anda ingin menjadi super duperbertele - tele maka Anda harus menggunakan penghitung waktu interval untuk memenuhi pengisian otomatis, plugin, dll:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

9
Akhirnya seseorang membaca pertanyaan dan menjawab semuanya!
Pasang kembali Monica Cellio

4
.on('change keyup paste', function() {...}sebenarnya kebakaran beberapa kali! Jika saya mengetik karakter, dan kemudian mengklik di luar, acara 'perubahan' dan 'keyup' keduanya dipecat, yang mengarah ke fungsi yang dieksekusi beberapa kali! Jika saya klik kanan lalu tempel lalu klik di luar, 'ubah' dan 'tempel' sama-sama diaktifkan. Heck! Saat menggunakan Ctrl + V untuk menempel dan kemudian mengklik di luar api itu tiga kali !!
SNag

1
@ Nat ya, jadi Anda juga harus menambahkan cek menggunakan lastValuevariabel untuk memastikan itu benar-benar telah berubah.
Petah

1
+1. Namun, apakah mengikat untuk 'berubah' bahkan diperlukan di sini? Tidak jelas bagi saya kasus apa yang akan ditangani yang belum ditangani pada saat itu (perubahan) dipecat.
Madbreak

1
Acara tempel dipecat sebelum teks benar-benar disisipkan
developerbmw

85

Pada browser modern, Anda dapat menggunakan yang inputacara :

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});

1
Bagus - Saya tidak menyadarinya. Apakah ini HTML5?
Pasang kembali Monica Cellio

4
Saya ingin sekali menerima jawaban ini, tetapi seperti yang Anda katakan, ini adalah solusi untuk peramban modern. Aplikasi web saya ditargetkan untuk pengguna yang masih menggunakan IE8, dan ini tidak berfungsi pada IE8. :( Apa yang bisa saya katakan .. :(
SNag

Tidak menyala jika misalnya pilih semua teks dan tekan tombol hapus
jjxtra

4
$(this).bind('input propertychange', function() {
        //your code here
    });

Ini berfungsi untuk mengetik, menempel, klik kanan mouse paste dll.


1
Ini sepertinya solusi terbaik karena tidak memunculkan banyak peristiwa jika Anda melakukan sesuatu seperti menekan panah ke atas pada bidang angka.
Justin

Solusi sederhana dan efisien
Abdulhameed

4
if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

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

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

2

Coba ini:

$("#textbox").bind('paste',function() {alert("Change detected!");});

Lihat demo di JSFiddle .


Karena pertanyaannya adalah tempel, itu tidak berfungsi. acara tidak dipicu pada klik kanan dan tempel.
Dhaval Marthak

Dan apa hubungannya dengan penggunaan bind()?
Pasang kembali Monica Cellio

dia mengatakan bahwa dia acara keyup tidak dipecat ketika klik kanan + tempel di atasnya, jadi keyupdan change()memiliki perilaku khas mereka sehingga id dia ingin mengeksekusi acara kemudian pastemungkin menjadi pilihan
Dhaval Marthak

Tentu saja, tetapi itu masih tidak menjawab mengapa penggunaan bindbukan on.
Pasang kembali Monica Cellio

0

Coba Kode di bawah ini:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

Bagaimana cara menangkap tempel dengan mouse, seperti yang disebutkan dalam pertanyaan?
Pasang kembali Monica Cellio

penekanan tombol cocok karena dia mengatakan bahwaevent to be fired on every character change in the textbox
Venkat.R

Jika Anda membaca semua pertanyaan, Anda akan melihat dia juga berkata,"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."
Pasang kembali Monica Cellio

0

Membaca komentar Anda membawa saya ke perbaikan kotor. Ini bukan cara yang benar, saya tahu, tetapi bisa menjadi solusi.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
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.