Maison >interface Web >js tutoriel >Comment obtenir et perdre des événements de focus dans jquery
Dans jquery, vous pouvez utiliser la méthode focus() pour obtenir l'événement focus, la syntaxe "$(selector).focus()" ; vous pouvez utiliser la méthode blur() pour perdre l'événement focus, la syntaxe "$" ; (sélecteur).blur()".
L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.
S'il existe des éléments de formulaire sur le site Web frontal qui permettent aux utilisateurs de remplir du contenu, nous pouvons utiliser les événements de focus et les événements de perte de focus dans JQ pour donner aux utilisateurs quelques invites. Aujourd'hui, nous allons parler de la façon d'utiliser les événements d'obtention et de perte de focus sous JQuery.
méthode focus() : Lorsqu'un élément est sélectionné en cliquant sur la souris ou positionné par la touche de tabulation, l'élément obtiendra le focus.
Syntaxe :
$(selector).focus()
Copie
Exemple : La zone de saisie change la couleur de sa bordure lorsqu'elle obtient le focus
Exemple de code :
<input type="text" name="" id="mochu"> <script> $('#mochu').focus(function(){ $(this).css('border-color','red'); }); </script>
Copie
Lorsque la souris se déplace dans l'entrée et clique, l'entrée L'élément deviendra comme suit Sous la forme d'un événement
jq focus(), un style CSS sera ajouté à l'entrée
<input type="text" name="" id="mochu" style="border-color: red;">
Copie
Méthode Blur() : L'événement Blur se produit lorsque l'élément perd le focus
Syntaxe :
$(selector).blur()
Copie
Exemple : Une fois la saisie perd le focus, le contenu de la zone de saisie apparaît
Exemple de code :
<input type="text" name="" id="mochu"> <script> $('#mochu').blur(function(){ alert($(this).val()); }); </script>
Copie
Le résultat en cours d'exécution est tel qu'indiqué dans la figure :
L'événement de perte Blur() dans JQuery peut être utilisé pour vérifier si le contenu saisi par l'utilisateur dans la zone de saisie est légal. Par exemple, le code suivant donnera un conseil
Exemple de code :
<input type="text" name="" id="mochu"> <script> $('#mochu').blur(function(){ if($(this).val().length < 5){ alert('字数太少了,多输入几个吧'); } }); </script>
Tutoriels associés recommandés : Tutoriel vidéo jQuery
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!