Comment suivre les modifications apportées aux champs de texte en temps réel ?

Suivi des modifications d'entrée dans les champs de texte au fur et à mesure que vous tapez

Contrairement à une idée fausse courante, l'événement input type="text" onchange est déclenché à la sortie le contrôle (flou). Pour suivre les modifications au fur et à mesure qu'elles se produisent, envisagez d'exploiter l'événement oninput de HTML5.

Avantages de oninput :

• On dirait un changement sans perdre le focus sur l'élément.
• Largement pris en charge sur tous les navigateurs, y compris les mobiles, à l'exception d'IE8 et ci-dessous.

Implémentation :

Pour les navigateurs autres que IE, ajoutez simplement un écouteur d'événement pour l'événement oninput :

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

Pour IE8, incluez un écouteur d'événement pour onpropertychange comme eh bien :

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

Considérations supplémentaires :

Bien que oninput soit fiable dans la plupart des cas, il présente des limites pour certaines entrées :

• Sélectionner les options : Firefox/Edge18-/IE9 ne se déclenche pas lors de l'entrée pour l'option de sélection modifications.
• Collage par clic droit : L'utilisation d'événements onkey* n'est pas idéale, car des modifications de contenu peuvent se produire par un clic droit et un collage.

Dans ces Dans certains scénarios, une solution de contournement possible consiste à effectuer le suivi des modifications manuellement à l'aide d'une fonction setTimeout. Même s'il n'est pas aussi élégant, il peut néanmoins capturer efficacement les changements.

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!