Selliste stsenaariumide puhul nagu andmete valideerimine ja kontrollimine muudetakse väljaelementide stiili alati, kui kasutaja vabastab klaviatuurilt ühe vajutatud klahvi. See stiilimuutus iga klahvivajutuse või vabastamise suhtes toimub jQuery pakutavate sündmuste töötlejate kaudu. Täpsemalt on sündmuste käitleja või meetod, mis tegeleb või käivitab funktsiooni mis tahes vajutatud klahvi vabastamisel, ' klahvivajutus ()” meetodil.
Teisest küljest on meetod, mis käsitleb või kutsub funktsiooniklahvi vajutamist, ' klahvi alla ()” meetodit ja saate kontrollida meie seotud artiklit selle sündmuse jaoks.
Selles ajaveebis kirjeldame lühidalt jQuery keyup() meetodit.
Kuidas kasutada jQuery keyup() meetodit?
jQuery' klahvivajutus ()” meetod käivitab anonüümse funktsiooni alati, kui kasutaja lõpetab valitud väljal olevate klahvide vajutamise või sisestamise. Seda meetodit kasutatakse ka dünaamilise stiili rakendamiseks valitud elemendile reaalajas.
Süntaks
Keyup() jQuery meetodi süntaks on järgmine:
$ ( 'sel' ) . klahvivajutus ( customFunc )
Ülaltoodud süntaksis ' sel ” on valitud HTML-i element ja „ customFunc ' on funktsioon, mida käivitab ' klahvivajutus ' meetod '' asemel sel ”.
Toome sügavamaks mõistmiseks paar näidet.
Näide 1: Teksti värvi muutmine 'keyup()' meetodi abil
Sel juhul muudetakse sisestatud teksti värvi teist värvi, kui kasutaja vabastab juba vajutatud klahvi, nagu allpool näidatud:
< html >
< pea >
< stsenaarium src = 'https://code.jquery.com/jquery-3.7.0.js' >< / stsenaarium >
< stsenaarium >
$(dokument).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('värv', 'metsaroheline');
});
});
< / stsenaarium >
< / pea >
< keha >
< div >
Sisestage Linuxhinti andmed: < sisend id = 'demo' tüüp = 'tekst' / >
< / div >
< / keha >
< / html >
Ülaltoodud koodi kirjeldust mainitakse allpool:
- Esiteks importige jQuery projekti, sisestades selle veebipõhise CDN-i, külastades seda link ametlikust dokumentatsioonist.
- Järgmisena looge anonüümne funktsioon, mida kutsutakse välja, kui dokument ” või leht laaditakse. See funktsioon valib HTML-i elemendi ID-ga 'demo' ja lisab ' klahvivajutus ()” meetodit sellega.
- ' klahvivajutus ()' meetod kutsub tagasihelistamisfunktsiooni, mis kasutab ' css ()', et määrata teksti fondi värviks ' metsaroheline ”.
- Nüüd looge valitud '< sisend >“ elementi „<“ sees keha >' silt ja määrake sellele ID demo ”.
Veebilehe eelvaade pärast kompileerimisprotsessi lõppu:
Väljund näitab teksti värvi muutusi, kui valitud klahv on vabastatud.
Näide 2: Taustavärvi dünaamiline muutmine
Selles näites määratakse valitud HTML-elemendi jaoks erinevad taustavärvid alati, kui kasutaja vajutatud klahvilt lahkub. Vaatame selle stsenaariumi koodi üle:
< pea >< stsenaarium src = 'https://code.jquery.com/jquery-3.7.0.js' >< / stsenaarium >
< stsenaarium >
lase backgroundShades = [ 'akvamariin' , 'oranžeeritud' , 'cadetblue' , 'metsaroheline' ,
'helehall' , 'liivapruun' , 'magenta' , 'burlywood' ] ;
las j = 0 ;
$ ( dokument ) .keyup ( funktsiooni ( sündmus ) {
$ ( '#hgg' ) .css ( 'taustavärv' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / stsenaarium >
< / pea >
< keha >
< h1 stiilis = 'värv: mereroheline' >Linuxhinti artikkel< / h1 >< br >
< div id = 'hgg' stiilis = 'polster: 10 pikslit' >
< h2 >jQuery klahv Kasutatakse erineva määramiseks Taust iga kord, kui võti vabastatakse.< / h2 >
< br / >
< / div >
< / keha >
Ülaltoodud koodi kirjeldus:
- Esialgu importige jQuery oma projekti, lisades jQuery CDN-i jaotisesse „< pea >” silt.
- Seejärel looge massiiv nimega ' backgroundShades ”, mis sisaldab kaheksat juhuslikku värvi.
- Järgmiseks ' klahvivajutus ()' meetod on lisatud jaotisele ' dokument ” ja see kutsub esile anonüümse tagasihelistamise funktsiooni. See funktsioon valib HTML-i elemendi ID-ga ' hgg ' ja rakendab CSS-i ' taustavärv ” vara.
- Massiiv ' backgroundShades ' edastatakse CSS-i atribuutide väärtusena ja indeksiks määratakse ' j ” muutuja. Seda muutujat suurendatakse iga kord ühe võrra ja see algab uuesti väärtusest ' 0 ' indeks, kui väärtus jõuab ' 8 ”. Kuna massiivi max indeks on ' 7 ”.
- Pärast seda looge valitud ' div ' element ID-ga ' hgg ”, kui vajutatud klahvi vabastatakse, muutub selle elemendi taustavärv.
Veebilehe eelvaade pärast koostamist:
Väljund kinnitab, et valitud HTML-elemendi taustavärv muutub iga kord, kui vajutatud või valitud klahv vabastatakse. See kõik puudutab ' klahvivajutus ()” meetodil.
Järeldus
jQuery' klahvivajutus ()” meetod käivitab valitud HTML-elemendil tagasihelistamisfunktsiooni, kui vajutatud klahv on vabastatud. See meetod ei helista klahvi vajutamisel, kuid vabastamise või klahvi üles vajutamise ajal täidab see funktsioon tagasihelistamisfunktsiooni. See ajaveeb on selgitanud jQuery keyup() meetodi kasutamist ja tööd.