En escenaris com la validació i la verificació de dades, l'estil dels elements de camp es canvia cada vegada que l'usuari deixa anar la tecla premuda des del teclat. Aquest canvi d'estil en relació a cada premsa o llançament de tecla es realitza mitjançant els controladors d'esdeveniments proporcionats per jQuery. Per ser específics, el gestor d'esdeveniments o el mètode que gestiona o invoca la funció quan es deixa anar qualsevol tecla premuda és el ' teclat ()” mètode.
D'altra banda, el mètode que gestiona o invoca la tecla de funció que es prem és el ' tecla premut ()” i podeu consultar els nostres associats article per aquest esdeveniment.
En aquest bloc, oferirem una breu descripció del mètode jQuery keyup().
Com utilitzar el mètode jQuery keyup()?
El jQuery ' teclat ()” activa la funció anònima sempre que l'usuari deixa de prémer o introduir les tecles dins del camp seleccionat. Aquest mètode també s'utilitza per aplicar un estil dinàmic sobre l'element seleccionat en temps real.
Sintaxi
La sintaxi utilitzada per al mètode keyup() jQuery és la següent:
$ ( 'això' ) . teclat ( customFunc )
En la sintaxi anterior, ' això ' és l'element HTML seleccionat i ' customFunc ' és una funció que s'executa per ' teclat ' mètode sobre el ' això ”.
Posem un parell d'exemples per a una comprensió més profunda.
Exemple 1: Canviar el color del text mitjançant el mètode 'keyup()'.
En aquest cas, el color del text introduït es canviarà a un color diferent quan l'usuari deixi anar la tecla ja premuda tal com es mostra a continuació:
< html >
< cap >
< guió src = 'https://code.jquery.com/jquery-3.7.0.js' >< / guió >
< guió >
$(document).preparat(funció() {
$('#demo').keyup(function() {
$('#demo').css('color', 'verd bosc');
});
});
< / guió >
< / cap >
< cos >
< div >
Introduïu les dades de Linuxhint: < entrada id = 'demo' tipus = 'text' / >
< / div >
< / cos >
< / html >
La descripció del codi anterior s'esmenta a continuació:
- Primer, importeu jQuery al projecte inserint el seu CDN en línia visitant aquest enllaç de la documentació oficial.
- A continuació, creeu una funció anònima que s'anomenarà quan ' document ” o es carrega la pàgina. Aquesta funció selecciona l'element HTML amb un identificador de 'demo' i adjunta el ' teclat ()” mètode amb ell.
- El ' teclat ()' invoca la funció de devolució de trucada que utilitza el ' css ()' per establir el color de la lletra del text a ' verd boscós ”.
- Ara, creeu el seleccionat “< entrada >' dins de l'element '< cos >' i assigneu-li un identificador de ' demostració ”.
Vista prèvia de la pàgina web un cop finalitzat el procés de compilació:
La sortida mostra el color dels canvis de text quan s'ha deixat anar la tecla seleccionada.
Exemple 2: Canviar el color de fons de manera dinàmica
En aquest exemple, s'establiran diferents colors de fons per a l'element HTML seleccionat sempre que l'usuari deixi la tecla premuda. Fem una ullada al codi d'aquest escenari:
< cap >< guió src = 'https://code.jquery.com/jquery-3.7.0.js' >< / guió >
< guió >
deixar fonsShades = [ 'aiguamarina' , 'taronja' , 'cadetblau' , 'verd del bosc' ,
'gris clar' , 'marró sorra' , 'magenta' , 'burlywood' ] ;
deixem j = 0 ;
$ ( document ) .keyup ( funció ( esdeveniment ) {
$ ( '#hgg' ) .css ( 'color de fons' , ombres de fons [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / guió >
< / cap >
< cos >
< h1 estil = 'color: verd marí' >Article Linuxhint< / h1 >< br >
< div id = 'hgg' estil = 'encoixinat: 10 píxels' >
< h2 > Tecla jQuery S'utilitza per establir diferents Fons cada vegada que es deixa anar la clau.< / h2 >
< br / >
< / div >
< / cos >
Descripció del codi anterior:
- Inicialment, importeu el jQuery al vostre projecte afegint jQuery CDN dins del '< cap > 'etiqueta.
- A continuació, creeu una matriu anomenada ' ombres de fons ” que conté vuit colors aleatoris.
- A continuació, el ' teclat ()' s'adjunta al mètode ' document ” i invoca una funció de devolució de trucada anònima. Aquesta funció selecciona l'element HTML amb un identificador de “ hgg ” i aplica el CSS “ color de fons ' propietat.
- La matriu ' ombres de fons ' es passa com a valor per a les propietats CSS i l'índex s'estableix en ' j ” variable. Aquesta variable s'incrementa en un cada cop i es reinicia des del ' 0 ” índex quan el valor arriba a “ 8 ”. Com que l'índex màxim de la matriu és ' 7 ”.
- Després d'això, creeu un seleccionat ' div ” element amb un identificador de “ hgg ”, el color de fons d'aquest element es canviarà quan es solta la tecla premuda.
Vista prèvia de la pàgina web després de la compilació:
La sortida confirma que el color de fons de l'element HTML seleccionat canvia cada vegada que es deixa anar la tecla premuda o seleccionada. Això es tracta d'utilitzar el ' teclat ()” mètode.
Conclusió
El jQuery ' teclat ()' activa una funció de devolució de trucada a l'element HTML seleccionat quan s'ha deixat anar la tecla premuda. Aquest mètode no crida quan s'està prement la tecla, però en el moment de deixar anar o activar la tecla aquesta funció executa una funció de devolució de trucada. Aquest bloc ha explicat l'ús i el funcionament del mètode jQuery keyup().