În scenarii precum validarea și verificarea datelor, stilul elementelor câmpului se schimbă de fiecare dată când utilizatorul eliberează de la tastatură o singură tastă apăsată. Această schimbare a stilului în raport cu fiecare apăsare sau eliberare de tastă este efectuată prin intermediul handlerelor de evenimente furnizate de jQuery. Pentru a fi specific, handlerul de evenimente sau metoda care tratează sau invocă funcția atunci când orice tastă apăsată este eliberată este „ tastare ()” metoda.
Pe de altă parte, metoda care manipulează sau invocă tasta funcțională este apăsată este „ Tasta în jos ()” și ne puteți verifica asociat articol pentru acest eveniment.
În acest blog, vom oferi o scurtă descriere a metodei jQuery keyup().
Cum se utilizează metoda jQuery keyup()?
jQuery „ tastare ()” declanșează funcția anonimă ori de câte ori utilizatorul încetează să apese sau să introducă tastele în câmpul selectat. Această metodă este, de asemenea, utilizată pentru a aplica stilul dinamic asupra elementului selectat în timp real.
Sintaxă
Sintaxa folosită pentru metoda keyup() jQuery este următoarea:
$ ( 'acest' ) . tastare ( customFunc )
În sintaxa de mai sus, „ acest ” este elementul HTML selectat și „ customFunc ” este o funcție care este executată de către „ tastare ” metoda peste “ acest ”.
Să avem câteva exemple pentru o înțelegere mai profundă.
Exemplul 1: Schimbarea culorii textului folosind metoda „keyup()”.
În acest caz, culoarea textului introdus va fi schimbată într-o culoare diferită atunci când utilizatorul eliberează tasta deja apăsată, după cum se arată mai jos:
< html >
< cap >
< scenariu src = „https://code.jquery.com/jquery-3.7.0.js” >< / scenariu >
< scenariu >
$(document).gata(funcție() {
$('#demo').keyup(function() {
$('#demo').css('culoare', 'verde pădure');
});
});
< / scenariu >
< / cap >
< corp >
< div >
Introduceți datele Linuxhint: < intrare id = 'demo' tip = 'text' / >
< / div >
< / corp >
< / html >
Descrierea codului de mai sus este menționată mai jos:
- Mai întâi, importați jQuery în proiect inserând CDN-ul său online, vizitând acesta legătură a documentatiei oficiale.
- Apoi, creați o funcție anonimă care va fi apelată când „ document ” sau pagina se încarcă. Această funcție selectează elementul HTML cu id-ul „demo” și atașează „ tastare ()” metoda cu aceasta.
- „ tastare ()” invocă funcția de apel invers care folosește „ css ()” pentru a seta culoarea fontului textului la „ padure verde ”.
- Acum, creați „< intrare >” element din interiorul „< corp >” etichetă și atribuiți-i un id de „ demonstrație ”.
Previzualizare a paginii web după finalizarea procesului de compilare:
Ieșirea arată că culoarea textului se modifică atunci când tasta selectată a fost eliberată.
Exemplul 2: Schimbarea dinamică a culorii de fundal
În acest exemplu, vor fi setate diferite culori de fundal pentru elementul HTML selectat ori de câte ori utilizatorul părăsește tasta apăsată. Să aruncăm o privire peste codul pentru acest scenariu:
< cap >< scenariu src = „https://code.jquery.com/jquery-3.7.0.js” >< / scenariu >
< scenariu >
lasa backgroundShades = [ 'acvamarin' , 'portocaliu rosu' , „cadetblue” , 'padure verde' ,
'gri deschis' , 'maroniu' , 'magenta' , 'burlywood' ] ;
fie j = 0 ;
$ ( document ) .keyup ( funcţie ( eveniment ) {
$ ( „#hgg” ) .css ( 'culoare de fundal' , fundalNuanțe [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / scenariu >
< / cap >
< corp >
< h1 stil = 'culoare: verde mare' >Articol Linuxhint< / h1 >< br >
< div id = 'hgg' stil = 'padding: 10px' >
< h2 >jQuery keyup Folosit pentru a seta diferit fundal de fiecare dată când Key este eliberată.< / h2 >
< br / >
< / div >
< / corp >
Descrierea codului de mai sus:
- Inițial, importați jQuery în proiectul dvs. adăugând jQuery CDN în interiorul „< cap >” etichetă.
- Apoi, creați o matrice numită „ nuanțe de fundal ” care conține opt culori aleatorii.
- În continuare, „ tastare ()” metoda este atașată la „ document ” și invocă o funcție anonimă de apel invers. Această funcție selectează elementul HTML cu un id de „ hgg ” și aplică CSS „ culoare de fundal ” proprietate.
- Matricea „ nuanțe de fundal ” este transmis ca valoare pentru proprietățile CSS, iar indexul este setat la „ j ' variabil. Această variabilă este incrementată cu una de fiecare dată și repornește de la „ 0 ” indice când valoarea atinge “ 8 ”. Deoarece indexul maxim din matrice este „ 7 ”.
- După aceea, creați un „ div ” element cu un id de “ hgg ”, culoarea de fundal a acestui element va fi schimbată atunci când tasta apăsată va fi eliberată.
Previzualizare a paginii web după compilare:
Ieșirea confirmă că culoarea de fundal pentru elementul HTML selectat se schimbă de fiecare dată când tasta apăsată sau selectată este eliberată. Este vorba despre utilizarea „ tastare ()” metoda.
Concluzie
jQuery „ tastare ()” declanșează o funcție de apel invers pe elementul HTML selectat atunci când tasta apăsată a fost eliberată. Această metodă nu apelează atunci când tasta este apăsată, dar în momentul eliberării sau la apăsarea tastei, această funcție execută o funcție de apel invers. Acest blog a explicat utilizarea și funcționarea metodei jQuery keyup().