Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation de jquery event change()

Explication détaillée de l'utilisation de jquery event change()

黄舟original: 2018-05-15 10:12:389876parcourir

Cet article présente principalement l'utilisation de change() dans jquery. Il analyse la fonction, la définition et les compétences d'utilisation spécifiques du changement avec des exemples. Il est d'une grande valeur pratique.

Cet article analyse l'utilisation de change() dans jquery avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

change() Lorsque la valeur de l'élément change, l'événement de changement se produit. Cet événement s'applique uniquement aux champs de texte, aux éléments textarea et select.
Lorsqu'il est utilisé avec des éléments sélectionnés, l'événement de changement se produit lorsqu'une option est sélectionnée. Lorsqu'il est utilisé avec un champ de texte ou une zone de texte, cet événement se produit lorsque l'élément perd le focus.
1. Utilisation du changement

1. Déclencher un événement de changement : déclencher un événement de changement de l'élément sélectionné

Syntaxe : $(selector).change()

2. Liez la fonction à l'événement de changement : spécifiez la fonction à exécuter lorsque l'événement de changement de l'élément sélectionné se produit.

Syntaxe : $(selector).change(function)

2. Exemple de change() dans jquery

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
 $("button").click(function(){
  $("input").change();
 });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>

oninput ,onpropertychange,onchange usage

l L'événement déclencheur onchange doit remplir deux conditions :

a) La propriété de l'objet actuel change et est déclenchée par un événement clavier ou souris (Le déclenchement du script n'est pas valide)

b) L'objet actuel perd le focus (onblur)

l Lors d'un changement de propriété, tant que les propriétés de l'objet actuel changent, l'événement sera déclenché, mais il est exclusif à IE ;

l oninput est une version non navigateur IE de onpropertychange. Il prend en charge les navigateurs tels que Firefox et Opera, mais il y a une différence quand il est lié. un objet, toutes les propriétés de l'objet ne peuvent pas être modifiées. Déclenche un événement, qui ne fonctionne que lorsque la valeur de l'objet change.

Dans la zone de texte, si vous souhaitez capturer la saisie au clavier de l'utilisateur, utilisez simplement onkeyup pour vérifier l'événement. Cependant, onkeyup ne prend pas en charge le copier-coller, vous devez donc surveiller dynamiquement les changements de valeur dans le fichier. textarea, qui nécessite onpropertychange (utilisé dans le navigateur IE) et oninput (navigateur non-IE) sont utilisés ensemble.

Bogue Onpropertychange

Lors de l'implémentation du code, il a été constaté que lors de la réponse à l'utilisateur en cliquant sur la zone de texte, si obj.className="XX" ; zone de saisie de texte, ce sera le cas. En conséquence, il y aura un bug dans IE qui onpropertychange ne sera pas déclenché lorsque le premier caractère est saisi, il doit donc être défini comme ceci : obj.style.color="#000";

Parlons d'abord de jquery, en utilisant la bibliothèque jQuery. Si tel est le cas, il vous suffit de lier les événements oninput et onpropertychange en même temps. Exemple de code :

$(&#39;#username&#39;).bind(&#39;input propertychange&#39;, function() {    
$(&#39;#content&#39;).html($(this).val().length + &#39; characters&#39;);});

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Composant de pagination basé sur l'encapsulation jQueryArticle suivant：Composant de pagination basé sur l'encapsulation jQuery

Articles Liés

Voir plus