js et jquery surveillance en temps réel des méthodes oninput et onpropertychange de la zone de saisie compétences value_javascript

L'exemple de cet article décrit les méthodes oninput et onpropertychange de js et jquery qui surveillent la valeur de la zone de saisie en temps réel. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

J'ai récemment travaillé sur un projet, et l'exigence était de faire correspondre automatiquement les mots-clés dans la zone déroulante. Les détails spécifiques étaient de surveiller les changements dans la valeur de la zone de texte en temps réel, puis de faire correspondre le contenu pertinent. .

Lorsque j'ai commencé le projet, la première chose à laquelle j'ai pensé était le changement dans JQ, mais j'ai immédiatement exclu cette méthode car le changement est déclenché lorsque la zone de texte perd le focus. Pour sauver le pays, j'ai pensé à utiliser Keydown pour le résoudre. Tout le reste va bien, sauf que cet événement ne peut pas être déclenché lors d'un copier-coller à l'aide de la souris au lieu d'utiliser le clavier. Cette méthode est donc également éliminée.

Ensuite, j'ai vérifié certaines informations pertinentes et j'ai découvert que seuls les oninput et onpropertychange de js natif répondaient à cette exigence. Ensuite, je suis allé à l'API de JQ pour trouver une méthode correspondante. J'ai été déçu de ne pas pouvoir la trouver, mais de la lier. va en effet lier quelque chose comme ça. L'événement est input & propertychange Après avoir réussi le test, il n'y a en effet aucun problème.

Voici maintenant un exemple :

JQ：

$('input').bind('input propertychange', function() { 
 //进行相关操作 
});

Parmi eux : propertychange est destiné à la compatibilité avec les versions inférieures à IE9.

L'événement oninput dans JS n'est pas pris en charge dans les versions inférieures à IE9. Il doit être remplacé par l'événement onpropertychange unique d'IE. Cet événement sera déclenché lorsque l'interface utilisateur change ou lorsque le contenu est directement modifié à l'aide d'un script. les situations suivantes :

Le statut sélectionné de l'élément input:checkbox ou input:radio a été modifié et l'attribut coché a changé.

La valeur de l'élément input:text ou textarea est modifiée et l'attribut value change.
L'élément sélectionné de l'élément select est modifié et l'attribut selectedIndex change.
JS :

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //需要用addEventListener来注册事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.