U scenarijima kao što su provjera i provjera valjanosti podataka, stil elemenata polja se mijenja kad god korisnik otpusti jednu pritisnutu tipku s tipkovnice. Ova promjena stila u odnosu na svaki pritisak ili otpuštanje tipke izvodi se putem rukovatelja događajima koje pruža jQuery. Konkretno, rukovatelj događajem ili metoda koja se bavi ili poziva funkciju kada se bilo koja pritisnuta tipka otpusti je ' keyup ()” metoda.
S druge strane, metoda koja rukuje ili poziva pritiskom funkcijske tipke je ' spuštanje tipke ()” i možete provjeriti našu povezanu članak za ovaj događaj.
U ovom blogu dat ćemo kratak opis metode jQuery keyup().
Kako koristiti metodu jQuery keyup()?
jQuery ' keyup ()” metoda aktivira anonimnu funkciju kad god korisnik prestane pritiskati ili unositi tipke unutar odabranog polja. Ova se metoda također koristi za primjenu dinamičkog stila na odabrani element u stvarnom vremenu.
Sintaksa
Sintaksa koja se koristi za keyup() jQuery metodu je sljedeća:
$ ( 'ovaj' ) . keyup ( customFunc )
U gornjoj sintaksi, ' ovaj ” je odabrani HTML element, a „ customFunc ” je funkcija koju izvršava „ keyup ' metoda preko ' ovaj ”.
Navedimo nekoliko primjera za dublje razumijevanje.
Primjer 1: Promjena boje teksta pomoću metode 'keyup()'.
U ovom slučaju, boja unesenog teksta će se promijeniti u drugu boju kada korisnik otpusti već pritisnutu tipku kao što je prikazano u nastavku:
< html >
< glava >
< skripta src = 'https://code.jquery.com/jquery-3.7.0.js' >< / skripta >
< skripta >
$(dokument).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('boja', 'zelena šuma');
});
});
< / skripta >
< / glava >
< tijelo >
< div >
Unesite podatke o Linuxhintu: < ulazni iskaznica = 'demo' tip = 'tekst' / >
< / div >
< / tijelo >
< / html >
Opis gornjeg koda naveden je u nastavku:
- Prvo uvezite jQuery u projekt umetanjem njegovog mrežnog CDN-a tako što ćete posjetiti ovo veza službene dokumentacije.
- Zatim stvorite anonimnu funkciju koja će biti pozvana kada se ' dokument ” ili se stranica učitava. Ova funkcija odabire HTML element s ID-om 'demo' i prilaže ' keyup ()” metoda s njim.
- ' keyup ()' metoda poziva funkciju povratnog poziva koja koristi ' css ()” za postavljanje boje fonta teksta na “ šumskozelena ”.
- Sada stvorite odabrani “< ulazni >” unutar elementa “< tijelo >” označite i dodijelite mu ID od “ demo ”.
Pregled web stranice nakon završetka procesa kompilacije:
Izlaz pokazuje promjenu boje teksta kada se odabrana tipka otpusti.
Primjer 2: Dinamička promjena boje pozadine
U ovom primjeru, različite boje pozadine bit će postavljene za odabrani HTML element kad god korisnik napusti pritisnutu tipku. Pogledajmo kod za ovaj scenarij:
< glava >< skripta src = 'https://code.jquery.com/jquery-3.7.0.js' >< / skripta >
< skripta >
neka backgroundShades = [ 'akvamarin' , 'narančasto' , 'cadetblue' , 'šumskozeleno' ,
'svijetlo siva' , 'pješčanosmeđa' , 'magenta' , 'burlywood' ] ;
neka j = 0 ;
$ ( dokument ) .ključ ( funkcija ( događaj ) {
$ ( '#hgg' ) .css ( 'boja pozadine' , pozadinske nijanse [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / skripta >
< / glava >
< tijelo >
< h1 stil = 'boja: morskozelena' >Linuxhint članak< / h1 >< br >
< div iskaznica = 'hgg' stil = 'padding: 10px' >
< h2 >jQuery tipka se koristi za postavljanje različitih Pozadina svaki put kada se tipka otpusti.< / h2 >
< br / >
< / div >
< / tijelo >
Opis gornjeg koda:
- U početku uvezite jQuery u svoj projekt dodavanjem jQuery CDN unutar “< glava >” oznaku.
- Zatim stvorite polje pod nazivom ' backgroundShades ” koji sadrži osam nasumičnih boja.
- Zatim, ' keyup ()' metoda je priložena ' dokument ” i poziva funkciju anonimnog povratnog poziva. Ova funkcija odabire HTML element s ID-om ' hgg ' i primjenjuje CSS ' boja pozadine ” vlasništvo.
- Niz ' backgroundShades ” prosljeđuje se kao vrijednost za CSS svojstva, a indeks se postavlja na „ j ” varijabla. Ova se varijabla svaki put povećava za jedan i ponovno se pokreće od ' 0 ” indeks kada vrijednost dosegne “ 8 ”. Budući da je maksimalni indeks u nizu ' 7 ”.
- Nakon toga kreirajte odabrani ' div ” element s ID-om „ hgg ”, boja pozadine ovog elementa će se promijeniti kada se pritisnuta tipka otpusti.
Pregled web stranice nakon kompilacije:
Izlaz potvrđuje da se boja pozadine za odabrani HTML element mijenja svaki put kada se pritisnuta ili odabrana tipka otpusti. To je sve o korištenju ' keyup ()” metoda.
Zaključak
jQuery ' keyup ()” metoda pokreće funkciju povratnog poziva na odabranom HTML elementu kada se pritisnuta tipka otpusti. Ova metoda ne poziva kada je tipka pritisnuta, ali u trenutku otpuštanja ili pri podizanju tipke ova funkcija izvršava funkciju povratnog poziva. Ovaj blog je objasnio korištenje i rad metode jQuery keyup().