Comment puis-je suivre les modifications apportées à la saisie de texte en temps réel sur les navigateurs ?

Suivi au fur et à mesure de la frappe dans les entrées de texte

Les événements de modification pour les entrées de texte ne se déclenchent généralement qu'après la perte du focus. Cependant, pour les scénarios où vous avez besoin d'un suivi en temps réel, il existe plusieurs options.

Événement oninput

Les navigateurs modernes prennent en charge l'événement oninput, qui se déclenche en permanence en tant que champ de texte. changements de contenu. Cela élimine le besoin de perdre le focus.

onpropertychange

Pour Internet Explorer 8 et versions antérieures, vous pouvez utiliser l'événement onpropertychange.

Gestion des événements avec entrée et changement de propriété

En combinant oninput et onpropertychange, vous pouvez gérer les navigateurs modernes et anciens avec élégance :

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

Considérations relatives aux zones de sélection

Firefox, Edge 18- et IE9 ne se déclenchent pas lors des événements de modification lorsque les options sont sélectionnées dans les cases de sélection. Pour ces navigateurs, envisagez plutôt d'utiliser un écouteur d'événement de changement.

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!