Mendeteksi perubahan input di jQuery?

Saat menggunakan jquery .changepada suatu inputacara hanya akan dipecat ketika input kehilangan fokus

Dalam kasus saya, saya perlu melakukan panggilan ke layanan (periksa apakah nilainya valid) segera setelah nilai input diubah. Bagaimana saya bisa mencapai ini?

DIPERBARUI untuk klarifikasi dan contoh

contoh: http://jsfiddle.net/pxfunc/5kpeJ/

Metode 1. inputacara

Di browser modern gunakan inputacara tersebut. Acara ini akan diaktifkan saat pengguna mengetik ke bidang teks, menempelkan, membatalkan, pada dasarnya kapan saja nilai berubah dari satu nilai ke nilai lain.

Di jQuery lakukan itu seperti ini

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

dimulai dengan jQuery 1.7, ganti binddengan on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Metode 2. keyupacara

Untuk browser lama gunakan keyupacara (ini akan menyala setelah tombol pada keyboard telah dirilis, acara ini dapat memberikan semacam false positive karena ketika "w" dirilis nilai input diubah dan keyupacara menyala, tetapi juga ketika Tombol "shift" dilepaskan saat keyupkebakaran terjadi tetapi tidak ada perubahan yang dilakukan pada input.) Metode ini juga tidak memecat jika pengguna mengklik kanan dan menempelkan dari menu konteks:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Metode 3. Timer ( setIntervalatau setTimeout)

Untuk menyiasati keterbatasan keyupAnda dapat mengatur timer untuk secara berkala memeriksa nilai input untuk menentukan perubahan nilai. Anda dapat menggunakan setIntervalatau setTimeoutmelakukan pemeriksaan pengatur waktu ini. Lihat jawaban yang ditandai pada pertanyaan SO ini: jQuery mengubah acara teks atau melihat biola untuk contoh kerja menggunakan focusdan bluracara untuk memulai dan menghentikan timer untuk bidang input tertentu

Jika Anda punya HTML5:

• oninput (Kebakaran hanya ketika perubahan benar-benar terjadi, tetapi segera melakukannya)

Jika tidak, Anda perlu memeriksa semua peristiwa ini yang mungkin mengindikasikan perubahan pada nilai elemen input:

• onchange
• onkeyup( belum keydown atau keypresskarena nilai input belum memiliki penekanan tombol baru di dalamnya)
• onpaste (ketika didukung)

dan mungkin:

• onmouseup (Saya tidak yakin tentang ini)

Dengan HTML5 dan tanpa menggunakan jQuery, Anda dapat menggunakan inputacara :

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

Ini akan menyala setiap kali teks input berubah.

Didukung di IE9 + dan browser lainnya.

Cobalah langsung di jsFiddle di sini .

Seperti yang sudah disarankan orang lain, solusi dalam kasus Anda adalah mengendus beberapa peristiwa .
Pengaya yang melakukan pekerjaan ini sering mendengarkan acara berikut:

$ input . on ( 'ubah keydown tombol tekan tombol mouse mouse klik mouse' , handler );

Jika menurut Anda itu cocok, Anda dapat menambahkan focus , blurdan acara lainnya juga.
Saya menyarankan untuk tidak melebihi dalam acara untuk mendengarkan, karena memuat dalam memori browser prosedur lebih lanjut untuk mengeksekusi sesuai dengan perilaku pengguna.

Perhatian: perhatikan bahwa mengubah nilai elemen input dengan JavaScript (mis. Melalui .val()metode jQuery ) tidak akan memecat salah satu peristiwa di atas.
(Referensi: https://api.jquery.com/change/ ).

Jika Anda ingin acara dipecat setiap kali ada perubahan dalam elemen maka Anda bisa menggunakan acara keyup .

// .blur dipicu saat elemen kehilangan fokus

$('#target').blur(function() {
  alert($(this).val());
});

// Untuk memicu secara manual gunakan:

$('#target').blur();

Ada acara jQuery seperti keyup dan penekanan tombol yang dapat Anda gunakan dengan masukan Elemen HTML. Anda juga bisa menggunakan acara blur () .

Ini mencakup setiap perubahan pada input menggunakan jQuery 1.7 ke atas:

$(".inputElement").on("input", null, null, callbackFunction);