Bagaimanakah Saya Boleh Menjejaki Perubahan Input Teks dalam Masa Nyata Merentasi Pelayar?

Penjejakan As-You-Type dalam Input Teks

peristiwa penukaran untuk input teks biasanya hanya dicetuskan selepas fokus hilang. Walau bagaimanapun, untuk senario di mana anda memerlukan penjejakan masa nyata, terdapat beberapa pilihan.

Acara oninput

Pelayar moden menyokong acara oninput, yang terus mencetuskan sebagai medan teks perubahan kandungan. Ini menghapuskan keperluan untuk kehilangan fokus.

onpropertychange

Untuk Internet Explorer 8 dan ke bawah, anda boleh menggunakan acara onpropertychange.

Pengendalian Acara dengan Input dan Perubahan Harta

Dengan menggabungkan oninput dan onpropertychange, anda boleh mengendalikan kedua-dua penyemak imbas moden dan lama dengan anggun:

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

Pertimbangan untuk Kotak Pilihan

Firefox, Edge 18- dan IE9 tidak menyala onchange peristiwa apabila pilihan dipilih dalam kotak pilihan. Untuk penyemak imbas ini, pertimbangkan untuk menggunakan pendengar acara perubahan.

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