Bagaimanakah Saya Boleh Menjejaki Perubahan Input Masa Nyata Tanpa Hilang Fokus?

Menjejaki Perubahan Input dalam Masa Nyata Menggunakan 'onchange' tanpa Hilang Fokus

Kawalan input dengan jenis "teks" biasanya mencetuskan " onchange" hanya apabila pengguna meninggalkan (mengaburkan) medan. Had ini boleh mengecewakan apabila menjejaki perubahan semasa pengguna menaip.

Nasib baik, penyemak imbas moden menawarkan penyelesaian yang lebih baik: "oninput." Pendengar acara ini menyediakan kemas kini masa nyata kandungan medan teks, menghapuskan keperluan untuk kehilangan fokus. Untuk keserasian maksimum, anda dinasihatkan untuk menggunakan kedua-dua "oninput" dan "onpropertychange" untuk sokongan IE.

Contoh yang menggambarkan pendekatan ini:

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 IE8

Nota Tambahan untuk Keserasian Penyemak Imbas:

• "oninput" disokong dalam semua penyemak imbas utama, termasuk penyemak imbas mudah alih.
• IE8 dan ke bawah memerlukan acara "onpropertychange".
• "onchange " tidak sesuai untuk menjejaki perubahan yang anda taip kerana kelewatannya selepas hilang fokus.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjejaki Perubahan Input Masa Nyata Tanpa Hilang Fokus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!