Tokiuose scenarijuose, kaip duomenų tikrinimas ir tikrinimas, lauko elementų stilius pakeičiamas kaskart, kai vartotojas iš klaviatūros atleidžia vieną paspaustą klavišą. Šis stiliaus pakeitimas, palyginti su kiekvienu klavišo paspaudimu ar atleidimu, atliekamas naudojant įvykių tvarkykles, kurias teikia jQuery. Tiksliau tariant, įvykių tvarkytoja arba metodas, kuris atlieka arba iškviečia funkciją, kai atleidžiamas bet kuris paspaustas klavišas, yra „ klavišas ()“ metodą.
Kita vertus, metodas, kuris apdoroja arba iškviečia funkcijos klavišą, yra paspaudžiamas klavišų paspaudimas ()“ metodą ir galite patikrinti mūsų susietą straipsnis šiam renginiui.
Šiame tinklaraštyje pateiksime trumpą jQuery keyup() metodo aprašymą.
Kaip naudoti jQuery keyup() metodą?
„jQuery“ klavišas ()“ metodas suaktyvina anoniminę funkciją, kai vartotojas nustoja spausti arba įvesti klavišus pasirinktame lauke. Šis metodas taip pat naudojamas dinaminiam stiliui pritaikyti pasirinktam elementui realiuoju laiku.
Sintaksė
Keyup() jQuery metodui naudojama sintaksė yra tokia:
$ ( 'tai' ) . klavišas ( CustomFunc )
Aukščiau pateiktoje sintaksėje „ tai “ yra pasirinktas HTML elementas ir „ CustomFunc “ yra funkcija, kurią vykdo „ klavišas “ metodas, o ne “ tai “.
Norėdami geriau suprasti, pateiksime keletą pavyzdžių.
1 pavyzdys: Teksto spalvos keitimas naudojant „keyup()“ metodą
Tokiu atveju įvesto teksto spalva bus pakeista į kitą spalvą, kai vartotojas atleis jau paspaustą klavišą, kaip parodyta žemiau:
< html >
< galva >
< scenarijus src = 'https://code.jquery.com/jquery-3.7.0.js' >< / scenarijus >
< scenarijus >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('spalva', 'miško žaluma');
});
});
< / scenarijus >
< / galva >
< kūnas >
< div >
Įveskite „Linuxhint“ duomenis: < įvestis id = 'demo' tipo = 'tekstas' / >
< / div >
< / kūnas >
< / html >
Aukščiau pateikto kodo aprašymas paminėtas žemiau:
- Pirma, importuokite jQuery į projektą, įterpdami savo internetinį CDN apsilankę čia nuoroda oficialių dokumentų.
- Tada sukurkite anoniminę funkciją, kuri bus iškviesta, kai „ dokumentas “ arba puslapis įkeliamas. Ši funkcija pasirenka HTML elementą, kurio ID yra „demo“ ir prideda „ klavišas ()“ metodą su juo.
- „ klavišas ()“ metodas iškviečia atgalinio skambinimo funkciją, kuri naudoja „ css ()“, kad nustatytumėte teksto šrifto spalvą į „ miško žaluma “.
- Dabar sukurkite pasirinktą „< įvestis >“ elementą „< kūnas >“ žymą ir priskirkite jai „ID“ demo “.
Tinklalapio peržiūra baigus kompiliavimo procesą:
Išvestis rodo, kad teksto spalva pasikeičia atleidus pasirinktą klavišą.
2 pavyzdys: Dinaminis fono spalvos keitimas
Šiame pavyzdyje pasirinktam HTML elementui bus nustatytos skirtingos fono spalvos, kai vartotojas paliks paspaustą klavišą. Pažvelkime į šio scenarijaus kodą:
< galva >< scenarijus src = 'https://code.jquery.com/jquery-3.7.0.js' >< / scenarijus >
< scenarijus >
leiskite backgroundShades = [ 'akvamarinas' , 'oranžuotas' , 'kadetų mėlynas' , 'miško žaluma' ,
'šviesiai pilka' , 'smėlio ruda' , 'rausvai raudona' , 'burlywood' ] ;
tegul j = 0 ;
$ ( dokumentas ) .keyup ( funkcija ( įvykis ) {
$ ( '#hgg' ) .css ( 'fono spalva' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / scenarijus >
< / galva >
< kūnas >
< h1 stilius = 'spalva: jūros žalia' >Linuxhint straipsnis< / h1 >< br >
< div id = 'hgg' stilius = 'padding: 10px' >
< h2 >jQuery klavišas Naudojamas nustatyti skirtingą Fonas kiekvieną kartą, kai atleidžiamas raktas.< / h2 >
< br / >
< / div >
< / kūnas >
Aukščiau pateikto kodo aprašymas:
- Iš pradžių importuokite jQuery į savo projektą įtraukdami jQuery CDN į „< galva >“ žymą.
- Tada sukurkite masyvą pavadinimu ' backgroundShades “, kuriame yra aštuonios atsitiktinės spalvos.
- Toliau „ klavišas ()“ metodas pridedamas prie „ dokumentas “ ir iškviečia anoniminę atgalinio skambinimo funkciją. Ši funkcija pasirenka HTML elementą, kurio ID yra ' hgg “ ir taiko CSS fono spalva ' nuosavybė.
- Masyvas ' backgroundShades “ perduodama kaip CSS ypatybių vertė, o indeksas nustatomas į „ j “ kintamasis. Šis kintamasis kiekvieną kartą didinamas vienu ir paleidžiamas iš naujo nuo „ 0 “ indeksas, kai reikšmė pasiekia “ 8 “. Kadangi maksimalus indeksas masyve yra ' 7 “.
- Po to sukurkite pasirinktą ' div ' elementas su ID ' hgg “, šio elemento fono spalva bus pakeista, kai paspaustas klavišas bus atleistas.
Tinklalapio peržiūra po kompiliavimo:
Išvestis patvirtina, kad pasirinkto HTML elemento fono spalva keičiasi kiekvieną kartą, kai paspaudžiamas arba pasirinktas klavišas atleidžiamas. Tai viskas apie „ klavišas ()“ metodą.
Išvada
„jQuery“ klavišas ()“ metodas suaktyvina atšaukimo funkciją pasirinktame HTML elemente, kai paspaustas klavišas atleidžiamas. Šis metodas neskambina, kai paspaudžiamas klavišas, bet atleidžiant arba paspaudžiant klavišą, ši funkcija atlieka atgalinio skambinimo funkciją. Šiame tinklaraštyje paaiškintas jQuery keyup() metodo naudojimas ir veikimas.