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

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 réel. temps, puis faites correspondre le contenu associé.

Lorsque j'ai repris le projet pour la première fois, la première chose à laquelle j'ai pensé était un 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é sur l'API de JQ pour trouver une méthode correspondante. J'ai été déçu de ne pas la trouver. , mais bind le fait. La liaison d'événements similaires, c'est-à-dire le changement d'entrée et de propriété, a réussi le test et ce n'était en effet pas un 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. . Il existe les types suivants Situation :

L'état sélectionné de l'élément input:checkbox ou input:radio est modifié et l'attribut vérifié change.

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 a été modifié et l'attribut selectedIndex a changé.
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.

Pour plus d'articles liés aux méthodes oninput et onpropertychange de js et jquery pour la surveillance en temps réel des valeurs de la zone de saisie, veuillez faire attention au site Web PHP chinois !