Comment suivre les modifications en temps réel dans les champs de saisie de texte ?

Meilleur moyen de suivre les modifications en temps réel dans les champs de texte de saisie

Lors de l'utilisation d'input type="text", l'événement onchange ne se produit souvent qu'après que l'utilisateur quitte le focus du terrain. Cela peut être problématique s'il est nécessaire de suivre les modifications au fur et à mesure qu'elles sont effectuées.

Prise en charge du navigateur pour le suivi à la volée

Les navigateurs modernes offrent une solution via l'événement oninput. Cet événement est déclenché à chaque fois que le contenu du champ de texte change. C'est un remplacement presque parfait pour onchange, offrant une surveillance en temps réel sans avoir besoin de perdre la concentration sur l'élément. Il est pris en charge par tous les principaux navigateurs, y compris les navigateurs mobiles.

Compatibilité entre navigateurs

Pour les navigateurs plus anciens, y compris IE8 et versions antérieures, une combinaison de l'événement onpropertychange et de l'événement oninput peut garantir une compatibilité croisée. compatibilité du navigateur.

Un exemple de code

Voici un exemple de code pour montrer comment utiliser oninput et onpropertychange pour le suivi entre navigateurs :

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);

Pour les navigateurs qui ne prennent pas en charge oninput ou onchange, la fonction setTimeout peut être utilisée comme alternative, mais elle n'est pas aussi élégante ou efficace que les solutions susmentionnées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!