acara 'masukan' jQuery

Saya belum pernah mendengar tentang suatu acara di jQuery disebut inputsampai saya melihat jsfiddle ini .

Apakah Anda tahu mengapa ini berhasil? Apakah itu alias keyupatau semacamnya?

$(document).on('input', 'input:text', function() {});

Terjadi ketika konten teks elemen diubah melalui antarmuka pengguna.

Ini bukan alias untuk keyupkarena keyupakan menyala meskipun kunci tidak melakukan apa-apa (misalnya: menekan dan kemudian melepaskan tombol Kontrol akan memicukeyup peristiwa).

Cara yang baik untuk memikirkannya adalah seperti ini: ini adalah peristiwa yang memicu setiap kali input berubah. Ini termasuk - tetapi tidak terbatas pada - menekan tombol yang mengubah input (jadi, misalnya, Ctrldengan sendirinya tidak akan memicu acara, tetapiCtrl-V untuk menempelkan beberapa teks), memilih opsi pelengkapan otomatis, tengah bergaya Linux -Klik tempel, seret-dan-jatuhkan, dan banyak hal lainnya.

Lihat halaman ini dan komentar pada jawaban ini untuk lebih jelasnya.

oninput Peristiwa sangat berguna untuk melacak perubahan bidang input.

Namun itu tidak didukung dalam versi IE <9. Tetapi versi IE yang lebih lama memiliki acara milik sendiri onpropertychangeyang melakukan hal yang sama seperti oninput.

Jadi Anda bisa menggunakannya dengan cara ini:

$(':input').on('input propertychange');

Untuk memiliki dukungan crossbrowser penuh.

Karena perubahan properti dapat dipicu untuk perubahan properti APAPUN, misalnya, properti yang dinonaktifkan diubah, maka Anda ingin menyertakan ini:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Menggunakan jQuery, efek berikut identik:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

inputNamun, dengan acara tersebut, hanya pola kedua yang tampaknya berfungsi di browser yang telah saya uji.

Dengan demikian, Anda berharap ini berfungsi, tetapi TIDAK (setidaknya saat ini):

$(':text').input(function(){ doSomething(); });

Sekali lagi, jika Anda ingin memanfaatkan delegasi acara (mis. Untuk menyiapkan acara #containersebelum Anda input.textditambahkan ke DOM), ini akan muncul di pikiran:

$('#container').on('input', ':text', function(){ doSomething(); });

Sayangnya, sekali lagi, ini TIDAK berfungsi saat ini!

Hanya pola ini yang berfungsi:

$(':text').on('input', function(){ doSomething(); });

DIedit DENGAN INFORMASI LEBIH LANJUT

Saya pasti dapat mengkonfirmasi bahwa pola ini:

$('#container').on('input', ':text', function(){ doSomething(); });

SEKARANG BEKERJA juga, di semua browser 'standar'.

Seperti yang dikatakan claustrofob, oninput didukung untuk IE9 +.

Namun , "Acara oninput bermasalah di Internet Explorer 9. Itu tidak dipecat ketika karakter dihapus dari bidang teks melalui antarmuka pengguna hanya ketika karakter dimasukkan. Meskipun acara pertukaran properti didukung di Internet Explorer 9, tetapi serupa dengan oninput acara, itu juga buggy, tidak dipecat saat dihapus.

Karena karakter dapat dihapus dengan beberapa cara (Backspace dan tombol Delete, CTRL + X, perintah Cut dan Delete dalam menu konteks), tidak ada solusi yang baik untuk mendeteksi semua perubahan. Jika karakter dihapus oleh perintah Hapus dari menu konteks, modifikasi tidak dapat dideteksi dalam JavaScript di Internet Explorer 9. "

Saya memiliki hasil yang baik yang mengikat input dan keyup (dan keydown, jika Anda ingin menjalankannya di IE sambil menahan tombol Backspace).

Hati-hati saat menggunakan INPUT. Acara ini diaktifkan pada fokus dan kabur di IE 11. Tetapi dipicu pada perubahan di browser lain.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Saya pikir 'input' hanya bekerja di sini dengan cara yang sama 'oninput' dalam Model Acara DOM Level O.

Kebetulan:

Sama seperti silkfire berkomentar, saya juga mencari di Google untuk 'jQuery input event'. Jadi saya dituntun ke sini dan terkejut mengetahui bahwa 'input' adalah parameter yang dapat diterima untuk perintah bind () jquery . Dalam jQuery in Action (p. 102, 2008 ed.) 'Input' tidak disebutkan sebagai peristiwa yang mungkin terjadi (terhadap 20 lainnya, dari 'blur' hingga 'unload'). Memang benar bahwa, pada hal. 92, kebalikannya dapat diperkirakan dari membaca ulang (yaitu dari referensi ke pengidentifikasi string yang berbeda antara model Level 0 dan Level 2). Itu cukup menyesatkan.

jQuery memiliki tanda tangan berikut untuk .on()metode ini:.on( events [, selector ] [, data ], handler )

Acara dapat berupa siapa saja yang terdaftar di referensi ini:

https://developer.mozilla.org/en-US/docs/Web/Events

Padahal, mereka tidak semua didukung oleh setiap browser.

Mozilla menyatakan yang berikut tentang acara masukan:

Acara input DOM diaktifkan secara sinkron ketika nilai elemen atau diubah. Selain itu, ia menyala pada editor yang dapat diedit saat kontennya diubah.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

bekerja di IE dan chrome