Une brève analyse des changements de valeur équivalente d'entrée HTML et l'ajout d'événements d'écoute

L'effet à obtenir

Dans de nombreux cas, nous surveillerons les changements dans la valeur de la zone de saisie en temps réel afin de prendre des actions immédiates pour guider le spectateur pour améliorer l’expérience utilisateur du site Web. Par exemple, il peut afficher instantanément le nombre d'octets qui ont été saisis dans la zone de saisie, ou lire instantanément la valeur saisie pour le guidage de recherche, qui est l'effet de recherche associé de Google, etc.
Beaucoup de choses peuvent être faites si nous pouvons capturer des événements instantanés.
Ce que vous devez savoir
Tout d'abord, nous devons comprendre la différence entre onchange et onpropertychange :

Sous IE, lorsque les attributs des éléments HTML changent, ils peuvent être capturés immédiatement via onpropertychange.
onchange doit faire perdre le focus à l'élément actuel (onblur) avant que l'événement puisse être activé lorsque la valeur de l'attribut change.

Après avoir compris cela, nous avons constaté que l'effet de onpropertychange est ce que nous voulons, mais malheureusement, cela ne fonctionne que sous IE. Pouvons-nous trouver un autre moment pour remplacer onpropertychange ?

Après avoir lu les informations, j'ai appris que l'événement oninput peut être utilisé pour obtenir le même effet dans d'autres navigateurs. C'est génial. Il suffit de parcourir. IE Distinguez-les simplement.

Utilisation de oninput

Commençons par comprendre comment utiliser oninput.
Si vous écrivez l'heure d'inscription directement sur la page, alors la méthode d'écriture suivante peut être obtenue :
<, input type="text" name="textfield" oninput="alert(this.value); " onpropertychange="alert(this.value)" />

Cependant, lorsque oninput est écrit en code JS et séparé, il est quelque peu différent de la méthode d'enregistrement d'événement ordinaire. Vous devez utiliser addEventListener pour vous inscrire.

La différence entre attachEvent et addEventListener

Cela dit, voyons comment utiliser attachEvent et addEventListener :

méthode attachEvent, pour un certain événement Joindre d'autres événements de traitement. (La série Mozilla n'est pas prise en charge) La méthode
addEventListener est utilisée dans la série Mozilla

Exemple :

document.getElementByIdx_x_x("btn").onclick = method1;   
  
document.getElementByIdx_x_x("btn").onclick = method2;   
  
document.getElementByIdx_x_x("btn").onclick = method3;

S'il est écrit comme ceci, alors seul medhot3 sera exécuté

s'écrit comme ceci :

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.attachEvent("onclick",method1);   
  
btn1Obj.attachEvent("onclick",method2);   
  
btn1Obj.attachEvent("onclick",method3);

L'ordre d'exécution est method3-> method2->method1

Si la série Mozilla ne prend pas en charge cette méthode, vous devez utiliser addEventListener

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.addEventListener("click",method1,false);   
  
btn1Obj.addEventListener("click",method2,false);   
  
btn1Obj.addEventListener("click",method3,false);   
  
执行顺序为method1->method2->method3

Apprenez à utiliser addEventListener Après avoir enregistré l'événement oninput, nous reviendrons sur le problème à résoudre [diviser le navigateur].

Navigateur Judge IE

Comment distinguer IE ?
Cela semble être une question courante. Il existe de nombreuses façons de le trouver sur Internet, qui sont classées en deux catégories :
L'une consiste à déterminer les attributs fonctionnels du navigateur.
La seconde consiste à juger la chaîne traditionnelle de l'agent utilisateur, qui est peut-être la méthode de détection la plus ancienne et la plus populaire.
Je n'entrerai pas dans les détails ici. Nous utilisons une méthode relativement simple pour juger

if("\v"=="v") {   
  
  alert("IE");   
  
}else{   
  
  alert("NO");   
  
}

Les problèmes que nous avons rencontrés jusqu'à présent sont déjà résolus, allons-y. commencez à écrire du code pour tester si notre idée peut être réalisée.

La brève analyse mentionnée ci-dessus du changement de valeur égale de l'entrée HTML et de l'ajout d'événements de surveillance est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra PHP. Site chinois.

Pour plus d'articles sur l'analyse simple des modifications équivalentes aux entrées HTML et l'ajout d'événements de surveillance, veuillez faire attention au site Web PHP chinois !