Dans des scénarios tels que la validation et la vérification des données, le style des éléments de champ est modifié chaque fois que l'utilisateur relâche la touche enfoncée à partir du clavier. Ce changement de style par rapport à chaque pression ou relâchement de touche est effectué via les gestionnaires d'événements fournis par jQuery. Pour être plus précis, le gestionnaire d'événements ou la méthode qui traite ou appelle la fonction lorsqu'une touche enfoncée est relâchée est le ' touche ()' méthode.
D'un autre côté, la méthode qui gère ou invoque la touche de fonction enfoncée est la ' touche Bas () » et vous pouvez consulter nos article pour cet événement.
Dans ce blog, nous fournirons une brève description de la méthode jQuery keyup().
Comment utiliser la méthode jQuery keyup() ?
Le jQuery' touche () » déclenche la fonction anonyme chaque fois que l'utilisateur arrête d'appuyer ou de saisir les touches à l'intérieur du champ sélectionné. Cette méthode est également utilisée pour appliquer un style dynamique sur l'élément sélectionné en temps réel.
Syntaxe
La syntaxe utilisée pour la méthode jQuery keyup() est la suivante :
$ ( 'ce' ) . touche ( fonction personnalisée )
Dans la syntaxe ci-dessus, ' ce ' est l'élément HTML sélectionné, et ' fonction personnalisée ' est une fonction qui est exécutée par le ' touche ' méthode sur le ' ce ».
Prenons quelques exemples pour une compréhension plus approfondie.
Exemple 1 : Modification de la couleur du texte à l'aide de la méthode « keyup() »
Dans ce cas, la couleur du texte saisi sera changée en une couleur différente lorsque l'utilisateur relâchera la touche déjà enfoncée, comme indiqué ci-dessous :
< HTML >
< tête >
< scénario src = 'https://code.jquery.com/jquery-3.7.0.js' >< / scénario >
< scénario >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / scénario >
< / tête >
< corps >
< div >
Entrez les données Linuxhint : < saisir identifiant = 'démo' taper = 'texte' / >
< / div >
< / corps >
< / HTML >
La description du code ci-dessus est mentionnée ci-dessous :
- Tout d'abord, importez jQuery dans le projet en insérant son CDN en ligne en visitant ceci lien de la documentation officielle.
- Ensuite, créez une fonction anonyme qui sera appelée lorsque le « document » ou la page est chargée. Cette fonction sélectionne l'élément HTML avec un identifiant 'demo' et attache le ' touche () » avec lui.
- Le ' touche () » appelle la fonction de rappel qui utilise le « css () » pour définir la couleur de la police du texte sur « forêt verte ».
- Maintenant, créez le « < saisir > » à l'intérieur de l'élément « < corps >' et attribuez-lui un identifiant de ' démo ».
Aperçu de la page Web après la fin du processus de compilation :
La sortie montre que la couleur du texte change lorsque la touche sélectionnée a été relâchée.
Exemple 2 : Modification dynamique de la couleur d'arrière-plan
Dans cet exemple, différentes couleurs d'arrière-plan vont être définies pour l'élément HTML sélectionné chaque fois que l'utilisateur quitte la touche enfoncée. Jetons un coup d'œil au code de ce scénario :
< tête >< scénario src = 'https://code.jquery.com/jquery-3.7.0.js' >< / scénario >
< scénario >
laisser backgroundShades = [ 'bleu vert' , 'rouge-orange' , 'cadetbleu' , 'forêt verte' ,
'gris clair' , 'marron sable' , 'magenta' , 'bois bohu' ] ;
laisse j = 0 ;
$ ( document ) .keyup ( fonction ( événement ) {
$ ( '#hgg' ) .css ( 'Couleur de l'arrière plan' , nuances d'arrière-plan [ j ] ) ;
j++;
j = j% 9 ;
} ) ;
< / scénario >
< / tête >
< corps >
< h1 style = 'couleur: vert d'eau' >Article sur les astuces Linux< / h1 >< br >
< div identifiant = 'hgg' style = 'rembourrage : 10px' >
< h2 > Clé jQuery utilisée pour définir différents Arrière-plan à chaque fois que la clé est relâchée.< / h2 >
< br / >
< / div >
< / corps >
Description du code ci-dessus :
- Dans un premier temps, importez le jQuery dans votre projet en ajoutant jQuery CDN dans le « < tête > »balise.
- Ensuite, créez un tableau nommé « arrière-planNuances » qui contient huit couleurs aléatoires.
- Ensuite, le « touche () » est jointe à la méthode « document » et il invoque une fonction de rappel anonyme. Cette fonction sélectionne l'élément HTML avec un identifiant de ' hgg » et applique le CSS « Couleur de l'arrière plan ' propriété.
- Le tableau ' arrière-planNuances ' est transmis comme valeur pour les propriétés CSS et l'index est défini sur ' j » variable. Cette variable est incrémentée de un à chaque fois et repart à partir du « 0 ' indice lorsque la valeur atteint ' 8 ». Parce que l'index maximum dans le tableau est ' 7 ».
- Après cela, créez un « sélectionné » div ' élément avec un identifiant de ' hgg », la couleur de fond de cet élément va être modifiée lorsque la touche enfoncée sera relâchée.
Aperçu de la page web après la compilation :
La sortie confirme que la couleur d'arrière-plan de l'élément HTML sélectionné change à chaque fois que la touche enfoncée ou sélectionnée est relâchée. Il s’agit d’utiliser le « touche ()' méthode.
Conclusion
Le jQuery' touche ()” déclenche une fonction de rappel sur l’élément HTML sélectionné lorsque la touche enfoncée a été relâchée. Cette méthode n'appelle pas lorsque la touche est enfoncée mais au moment du relâchement ou de l'appui sur la touche, cette fonction exécute une fonction de rappel. Ce blog a expliqué l'utilisation et le fonctionnement de la méthode jQuery keyup().