Comment puis-je suivre les modifications d'entrée en temps réel sans perdre le focus ?

Suivi des modifications d'entrée en temps réel à l'aide de « onchange » sans perdre le focus

Les contrôles d'entrée de type « texte » déclenchent généralement le « onchange" uniquement lorsque l'utilisateur quitte (brouille) le champ. Cette limitation peut être frustrante lors du suivi des modifications au fur et à mesure que l'utilisateur tape.

Heureusement, les navigateurs modernes offrent une meilleure solution : "oninput". Cet écouteur d'événements fournit une mise à jour en temps réel du contenu du champ de texte, éliminant ainsi le besoin de perdre le focus. Pour une compatibilité maximale, il est conseillé d'utiliser à la fois "oninput" et "onpropertychange" pour la prise en charge d'IE.

Un exemple illustrant cette approche :

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

Notes supplémentaires pour la compatibilité du navigateur :

• "oninput" est pris en charge dans tous les principaux navigateurs, y compris les mobiles navigateurs.
• IE8 et versions antérieures nécessitent l'événement "onpropertychange".
• "onchange" n'est pas approprié pour suivre les modifications au fur et à mesure que vous tapez en raison de son retard après la perte de focus.

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!