Tādos gadījumos kā datu validācija un verifikācija lauka elementu stils tiek mainīts ikreiz, kad lietotājs no tastatūras atbrīvo vienu nospiesto taustiņu. Šī stila maiņa attiecībā pret katru taustiņu nospiešanu vai atlaišanu tiek veikta, izmantojot notikumu apstrādātājus, ko nodrošina jQuery. Precīzāk sakot, notikumu apstrādātājs vai metode, kas veic vai izsauc funkciju, kad tiek atbrīvots kāds nospiests taustiņš, ir ' taustiņu pieslēgšana ()” metodi.
No otras puses, metode, kas apstrādā vai izsauc funkcijas taustiņa nospiešanu, ir “ taustiņu noslēgšana ()” metodi, un jūs varat pārbaudīt mūsu saistītos rakstu šim pasākumam.
Šajā emuārā mēs sniegsim īsu jQuery keyup() metodes aprakstu.
Kā izmantot jQuery keyup() metodi?
JQuery' taustiņu pieslēgšana ()” metode aktivizē anonīmo funkciju ikreiz, kad lietotājs pārtrauc nospiest vai ievadīt taustiņus atlasītajā laukā. Šo metodi izmanto arī, lai reāllaikā piemērotu dinamisko stilu atlasītajam elementam.
Sintakse
Keyup() jQuery metodei izmantotā sintakse ir šāda:
$ ( 'šis' ) . taustiņu pieslēgšana ( customFunc )
Iepriekš minētajā sintaksē ' šis ' ir atlasītais HTML elements un ' customFunc ” ir funkcija, ko izpilda taustiņu pieslēgšana ' metode, nevis ' šis ”.
Piedāvāsim dažus piemērus dziļākai izpratnei.
1. piemērs: Teksta krāsas maiņa, izmantojot “keyup()” metodi
Šādā gadījumā ievadītā teksta krāsa tiks mainīta uz citu krāsu, kad lietotājs atlaidīs jau nospiesto taustiņu, kā parādīts zemāk:
< html >
< galvu >
< skripts src = 'https://code.jquery.com/jquery-3.7.0.js' >< / skripts >
< skripts >
$(dokuments).ready(function() {
$('# demonstrācija').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / skripts >
< / galvu >
< ķermeni >
< div >
Ievadiet Linuxhint datus: < ievade id = 'demo' veids = 'teksts' / >
< / div >
< / ķermeni >
< / html >
Iepriekš minētā koda apraksts ir minēts zemāk:
- Pirmkārt, importējiet jQuery projektā, ievietojot tā tiešsaistes CDN, apmeklējot šo saite oficiālajā dokumentācijā.
- Pēc tam izveidojiet anonīmu funkciju, kas tiks izsaukta, kad dokumentu ” vai lapa tiek ielādēta. Šī funkcija atlasa HTML elementu ar ID “demo” un pievieno “ taustiņu pieslēgšana ()” metodi ar to.
- ' taustiņu pieslēgšana ()” metode izsauc atzvanīšanas funkciju, kas izmanto “ css ()”, lai iestatītu teksta fonta krāsu uz “ mežzaļš ”.
- Tagad izveidojiet atlasīto “< ievade >” elementu iekšpusē “< ķermeni >' tagu un piešķiriet tam ID ' demo ”.
Tīmekļa lapas priekšskatījums pēc kompilācijas procesa pabeigšanas:
Izvade parāda teksta krāsas izmaiņas, kad atlasītā atslēga ir atbrīvota.
2. piemērs: Fona krāsas dinamiska maiņa
Šajā piemērā atlasītajam HTML elementam tiks iestatītas dažādas fona krāsas ikreiz, kad lietotājs atstāj nospiesto taustiņu. Apskatīsim šī scenārija kodu:
< galvu >< skripts src = 'https://code.jquery.com/jquery-3.7.0.js' >< / skripts >
< skripts >
ļaut backgroundShades = [ 'akvamarīns' , 'oranžēts' , 'kadetblūs' , 'meža zaļš' ,
'gaiši pelēks' , 'smilšbrūns' , 'fuksīna' , 'burlywood' ] ;
ļaujiet j = 0 ;
$ ( dokumentu ) .keyup ( funkciju ( notikumu ) {
$ ( '#hgg' ) .css ( 'fona krāsa' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / skripts >
< / galvu >
< ķermeni >
< h1 stils = 'Krāsa: jūras zaļa' >Linuxhint raksts< / h1 >< br >
< div id = 'hgg' stils = 'polsterējums: 10 pikseļi' >
< h2 >jQuery taustiņš Izmanto, lai iestatītu atšķirīgu Fons katru reizi, kad atslēga tiek atbrīvota.< / h2 >
< br / >
< / div >
< / ķermeni >
Iepriekš minētā koda apraksts:
- Sākotnēji importējiet jQuery savā projektā, pievienojot jQuery CDN iekšā “< galvu >” tagu.
- Pēc tam izveidojiet masīvu ar nosaukumu ' backgroundShades ”, kas satur astoņas nejaušas krāsas.
- Tālāk “ taustiņu pieslēgšana ()” metode ir pievienota “ dokumentu ” un tas izsauc anonīmu atzvanīšanas funkciju. Šī funkcija atlasa HTML elementu ar ID ' hgg un piemēro CSS fona krāsa ” īpašums.
- Masīvs ' backgroundShades ” tiek nodota kā CSS rekvizītu vērtība, un indekss tiek iestatīts uz “ j ” mainīgais. Šis mainīgais katru reizi tiek palielināts par vienu un tiek restartēts no ' 0 ' indekss, kad vērtība sasniedz ' 8 ”. Tā kā maksimālais indekss masīvā ir ' 7 ”.
- Pēc tam izveidojiet atlasīto ' div 'elements ar ID ' hgg ”, šī elementa fona krāsa tiks mainīta, kad nospiestais taustiņš tiks atbrīvots.
Tīmekļa lapas priekšskatījums pēc kompilācijas:
Izvade apstiprina, ka atlasītā HTML elementa fona krāsa mainās katru reizi, kad tiek atbrīvots nospiestais vai atlasītais taustiņš. Tas viss attiecas uz ' taustiņu pieslēgšana ()” metodi.
Secinājums
JQuery' taustiņu pieslēgšana ()” metode aktivizē atzvanīšanas funkciju atlasītajā HTML elementā, kad nospiestais taustiņš ir atbrīvots. Šī metode neizsauc, kad taustiņš tiek nospiests, bet atlaišanas vai taustiņu uz augšu nospiežot, šī funkcija izpilda atzvanīšanas funkciju. Šajā emuārā ir izskaidrota jQuery keyup() metodes lietošana un darbība.