Az olyan forgatókönyvekben, mint az adatellenőrzés és -ellenőrzés, a mezőelemek stílusa megváltozik, amikor a felhasználó felengedi a billentyűzetről az egyetlen megnyomott billentyűt. Ez a stílusmódosítás minden egyes billentyűlenyomáshoz vagy -elengedéshez képest a jQuery által biztosított eseménykezelőkkel történik. Pontosabban, az eseménykezelő vagy metódus, amely kezeli vagy meghívja a függvényt, amikor bármelyik lenyomott billentyű felszabadul, a ' keyup ()” módszerrel.
Másrészt az a módszer, amely kezeli vagy meghívja a funkcióbillentyű lenyomását, a „ billentyűlenyomás ()” módszerrel, és ellenőrizheti a kapcsolódó cikk erre az eseményre.
Ebben a blogban rövid leírást adunk a jQuery keyup() metódusáról.
Hogyan kell használni a jQuery keyup() módszert?
A jQuery' keyup ()” metódus kiváltja az anonim funkciót, amikor a felhasználó abbahagyja a billentyűk lenyomását vagy beírását a kiválasztott mezőben. Ez a módszer arra is használható, hogy valós időben dinamikus stílust alkalmazzon a kiválasztott elemen.
Szintaxis
A keyup() jQuery metódushoz használt szintaxis a következő:
$ ( 'ez' ) . keyup ( customFunc )
A fenti szintaxisban: ' ez ' a kiválasztott HTML elem, és a ' customFunc ' egy olyan függvény, amelyet a ' keyup ' módszer a ' ez ”.
Nézzünk néhány példát a mélyebb megértéshez.
1. példa: A szöveg színének megváltoztatása a „keyup()” módszerrel
Ebben az esetben a beírt szöveg színe más színűre változik, amikor a felhasználó elengedi a már lenyomott billentyűt az alábbiak szerint:
< html >
< fej >
< forgatókönyv src = 'https://code.jquery.com/jquery-3.7.0.js' >< / forgatókönyv >
< forgatókönyv >
$(dokumentum).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('szín', 'erdőzöld');
});
});
< / forgatókönyv >
< / fej >
< test >
< div >
Írja be a Linuxhint adatokat: < bemenet id = 'demó' típus = 'szöveg' / >
< / div >
< / test >
< / html >
A fenti kód leírása az alábbiakban található:
- Először is importálja a jQuery-t a projektbe úgy, hogy beilleszti az online CDN-t ide link hivatalos dokumentáció.
- Ezután hozzon létre egy névtelen függvényt, amely akkor fog meghívódni, amikor a „ dokumentum ” vagy az oldal betöltődik. Ez a funkció kiválasztja a „demo” azonosítójú HTML elemet, és csatolja a „ keyup ()” módszerrel.
- A ' keyup ()” metódus meghívja a visszahívási függvényt, amely a „ css ()” a szöveg betűszínének beállításához „ erdő zöld ”.
- Most hozza létre a kiválasztott „< bemenet >” elem a „< test >” címkét, és rendelje hozzá a „ demó ”.
A weboldal előnézete az összeállítási folyamat befejezése után:
A kimenet azt mutatja, hogy a szöveg színe megváltozik a kiválasztott billentyű elengedésekor.
2. példa: A háttérszín dinamikus megváltoztatása
Ebben a példában különböző háttérszínek lesznek beállítva a kiválasztott HTML-elemhez, amikor a felhasználó elhagyja a lenyomott billentyűt. Tekintsük át ennek a forgatókönyvnek a kódját:
< fej >< forgatókönyv src = 'https://code.jquery.com/jquery-3.7.0.js' >< / forgatókönyv >
< forgatókönyv >
hagyja a backgroundShades-t = [ 'akvamarin' , 'narancsvörös' , 'kadétkék' , 'erdő zöld' ,
'világos szürke' , 'homokbarna' , 'bíborvörös' , 'burlywood' ] ;
legyen j = 0 ;
$ ( dokumentum ) .keyup ( funkció ( esemény ) {
$ ( '#hgg' ) .css ( 'háttérszín' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / forgatókönyv >
< / fej >
< test >
< h1 stílus = 'szín: tengerzöld' >Linuxhint cikk< / h1 >< br >
< div id = 'hgg' stílus = 'padding: 10px' >
< h2 >jQuery keyup Eltérő beállításra szolgál Háttér minden alkalommal, amikor a kulcsot elengedik.< / h2 >
< br / >
< / div >
< / test >
A fenti kód leírása:
- Kezdetben importálja a jQuery-t a projektbe úgy, hogy hozzáadja a jQuery CDN-t a „< fej >” címkét.
- Ezután hozzon létre egy '' nevű tömböt backgroundShades ” amely nyolc véletlenszerű színt tartalmaz.
- Ezután a „ keyup ()” módszer a „ dokumentum ” és egy névtelen visszahívási funkciót hív meg. Ez a függvény kiválasztja azt a HTML elemet, amelynek azonosítója ' hgg ', és alkalmazza a CSS-t' háttérszín ' ingatlan.
- A tömb' backgroundShades '' kerül átadásra a CSS-tulajdonságok értékeként, az index pedig a ' j ” változó. Ez a változó minden alkalommal eggyel növekszik, és újraindul a ' 0 ' index, amikor az érték eléri a ' 8 ”. Mivel a tömb maximális indexe ' 7 ”.
- Ezután hozzon létre egy kiválasztott ' div ' elem 'azonosítóval' hgg ', ennek az elemnek a háttérszíne megváltozik, amikor a lenyomott billentyűt elengedik.
A weboldal előzetese az összeállítás után:
A kimenet megerősíti, hogy a kiválasztott HTML-elem háttérszíne minden alkalommal megváltozik, amikor a lenyomott vagy a kiválasztott billentyűt felengedik. Ez minden a ' keyup ()” módszerrel.
Következtetés
A jQuery' keyup ()” metódus visszahívási funkciót indít el a kiválasztott HTML elemen, amikor a lenyomott billentyűt elengedik. Ez a metódus nem hívja meg a billentyűt, de az elengedéskor vagy a gomb felnyomásakor ez a funkció visszahívási funkciót hajt végre. Ez a blog elmagyarázza a jQuery keyup() metódus használatát és működését.