Bagaimana untuk Menjejaki Perubahan Masa Nyata dalam Medan Input Teks?

Cara Terbaik untuk Menjejaki Perubahan Masa Nyata dalam Medan Teks Input

Apabila menggunakan input type="text," peristiwa onchange selalunya berlaku hanya selepas pengguna meninggalkan fokus dari padang. Ini boleh menjadi masalah jika keperluannya adalah untuk menjejaki perubahan semasa ia dibuat.

Sokongan Penyemak Imbas untuk Penjejakan On-the-Fly

Pelayar moden menawarkan penyelesaian melalui acara oninput. Peristiwa ini dicetuskan setiap kali kandungan medan teks berubah. Ia merupakan pengganti yang hampir sempurna untuk onchange, menyediakan pemantauan masa nyata tanpa perlu kehilangan fokus daripada elemen. Ia disokong oleh semua penyemak imbas utama, termasuk penyemak imbas mudah alih.

Keserasian Merentas Penyemak Imbas

Untuk penyemak imbas lama, termasuk IE8 dan ke bawah, gabungan acara onpropertychange dan acara oninput dapat memastikan silang- keserasian penyemak imbas.

Contoh Kod

Berikut ialah contoh kod untuk mempamerkan cara menggunakan oninput dan onpropertychange untuk penjejakan merentas pelayar:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerText = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler);

// For completeness, include listen for option changes which won't trigger either input or change
source.addEventListener('change', inputHandler);

Untuk penyemak imbas yang tidak menyokong oninput atau onchange, fungsi setTimeout boleh digunakan sebagai alternatif, tetapi ia bukan sebagai elegan atau cekap seperti penyelesaian yang dinyatakan di atas.

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