Maison >interface Web >js tutoriel >Comment obtenir et perdre des événements de focus dans jquery

Comment obtenir et perdre des événements de focus dans jquery

青灯夜游
青灯夜游original
2021-11-19 10:42:1512909parcourir

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()".

Comment obtenir et perdre des événements de focus dans jquery

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.

jquery focus() obtient l'événement focus

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>
    $(&#39;#mochu&#39;).focus(function(){
        $(this).css(&#39;border-color&#39;,&#39;red&#39;);
    });
</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

jquery Blur() perd le focus de l'événement

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>
    $(&#39;#mochu&#39;).blur(function(){ 
    alert($(this).val());    
    });
 </script>

Copie

Le résultat en cours d'exécution est tel qu'indiqué dans la figure :

Comment obtenir et perdre des événements de focus dans jquery

Utilisez jq Blur() pour perdre l'événement Focus Vérifiez le contenu saisi par l'utilisateur

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>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了,多输入几个吧&#39;);
        }
    });
</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!

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