Bagaimanakah Anda Boleh Menjejaki Perubahan Input dalam Medan Teks dalam Masa Nyata?

Menjejaki Perubahan Input dalam Medan Teks semasa Anda Menaip

Tidak seperti salah tanggapan biasa, peristiwa input type="text" onchange dicetuskan apabila meninggalkan kawalan (kabur). Untuk menjejaki perubahan semasa ia berlaku, pertimbangkan untuk memanfaatkan peristiwa oninput HTML5.

Faedah oninput:

• Berasa seperti berubah tanpa kehilangan fokus pada elemen.
• Disokong secara meluas merentas penyemak imbas, termasuk telefon bimbit, kecuali IE8 dan di bawah.

Pelaksanaan:

Untuk penyemak imbas selain IE, cuma tambahkan pendengar acara untuk acara oninput:

document.getElementById('source').addEventListener('input', inputHandler);

Untuk IE8, sertakan pendengar acara untuk onpropertychange sebagai baik:

document.getElementById('source').addEventListener('propertychange', inputHandler);

Pertimbangan Tambahan:

Walaupun oninput boleh dipercayai untuk kebanyakan kes, ia mempunyai had untuk input tertentu:

• Pilih pilihan: Firefox/Edge18-/IE9 jangan gunakan onput untuk pilihan pilihan perubahan.
• Klik kanan menampal: Menggunakan peristiwa onkey* tidak sesuai, kerana perubahan kandungan boleh berlaku melalui klik kanan dan tampal.

Dalam ini senario, penyelesaian yang mungkin adalah dengan melakukan penjejakan perubahan secara manual menggunakan fungsi setTimeout. Walaupun tidak seanggun, ia masih boleh menangkap perubahan dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menjejaki Perubahan Input dalam Medan Teks dalam Masa Nyata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!