V scenároch, ako je overenie a overenie údajov, sa štýl prvkov poľa zmení vždy, keď používateľ uvoľní jeden stlačený kláves z klávesnice. Táto zmena štýlu vzhľadom na každé stlačenie alebo uvoľnenie klávesu sa vykonáva prostredníctvom obslužných programov udalostí poskytovaných jQuery. Aby sme boli konkrétni, obslužný program alebo metóda, ktorá poskytuje alebo vyvoláva funkciu, keď sa uvoľní akýkoľvek stlačený kláves, je „ klávesnica ()“ metóda.
Na druhej strane metóda, ktorá spracováva alebo vyvoláva stlačenie funkčného klávesu, je „ keydown ()“ a môžete skontrolovať našu pridruženú metódu článok pre túto udalosť.
V tomto blogu poskytneme stručný popis metódy jQuery keyup().
Ako používať metódu jQuery keyup ()?
jQuery' klávesnica ()” metóda spustí anonymnú funkciu vždy, keď používateľ prestane stláčať alebo zadávať klávesy vo vybranom poli. Táto metóda sa používa aj na aplikáciu dynamického štýlu na vybraný prvok v reálnom čase.
Syntax
Syntax použitá pre metódu keyup() jQuery je nasledovná:
$ ( 'toto' ) . klávesnica ( customFunc )
Vo vyššie uvedenej syntaxi „ toto “ je vybratý prvok HTML a “ customFunc “ je funkcia, ktorú vykonáva „ klávesnica “metóda nad “ toto “.
Uveďme si pár príkladov pre hlbšie pochopenie.
Príklad 1: Zmena farby textu pomocou metódy „keyup()“.
V tomto prípade sa farba zadaného textu zmení na inú, keď užívateľ uvoľní už stlačený kláves, ako je uvedené nižšie:
< html >
< hlavu >
< skript src = 'https://code.jquery.com/jquery-3.7.0.js' < / skript >
< skript >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('farba', 'lesna zeleň');
});
});
< / skript >
< / hlavu >
< telo >
< div >
Zadajte údaje Linuxhint: < vstup id = 'demo' typu = 'text' / >
< / div >
< / telo >
< / html >
Popis vyššie uvedeného kódu je uvedený nižšie:
- Najprv importujte jQuery do projektu vložením jeho online CDN na tejto stránke odkaz úradnej dokumentácie.
- Ďalej vytvorte anonymnú funkciu, ktorá sa bude volať, keď „ dokument “ alebo sa stránka načíta. Táto funkcia vyberie prvok HTML s ID „demo“ a pripojí „ klávesnica ()“ metóda s ním.
- ' klávesnica ()“ metóda vyvolá funkciu spätného volania, ktorá používa „ css ()“ na nastavenie farby písma textu na „ lesná zeleň “.
- Teraz vytvorte vybraté „< vstup >“ prvok vnútri „< telo >“ a priraďte mu id „ demo “.
Náhľad webovej stránky po dokončení procesu kompilácie:
Výstup zobrazuje zmeny farby textu po uvoľnení zvoleného tlačidla.
Príklad 2: Dynamická zmena farby pozadia
V tomto príklade sa nastavia rôzne farby pozadia pre vybraný prvok HTML vždy, keď používateľ opustí stlačený kláves. Pozrime sa na kód pre tento scenár:
< hlavu >< skript src = 'https://code.jquery.com/jquery-3.7.0.js' < / skript >
< skript >
nechať pozadieShades = [ 'akvamarín' , 'oranžovaný' , 'cadetblue' , 'lesná zeleň' ,
'svetlo sivá' , 'sandybrown' , 'purpurová' , 'burlywood' ] ;
nech j = 0 ;
$ ( dokument ) .klávesnica ( funkciu ( udalosť ) {
$ ( '#hgg' ) .css ( 'farba pozadia' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / skript >
< / hlavu >
< telo >
< h1 štýl = 'farba: morská zelená' >Článok o Linuxe< / h1 < br >
< div id = 'hgg' štýl = 'výplň: 10px' >
< h2 > Kláves jQuery Používa sa na nastavenie rozdielov Pozadie pri každom uvoľnení kľúča.< / h2 >
< br / >
< / div >
< / telo >
Popis vyššie uvedeného kódu:
- Najprv importujte jQuery do svojho projektu pridaním jQuery CDN do „< hlavu >“.
- Potom vytvorte pole s názvom „ backgroundShades “, ktorý obsahuje osem náhodných farieb.
- Ďalej, „ klávesnica ()“ metóda je pripojená k „ dokument “ a vyvolá funkciu anonymného spätného volania. Táto funkcia vyberie prvok HTML s ID „ hgg “ a použije CSS „ farba pozadia ' nehnuteľnosť.
- Pole “ backgroundShades ” sa odovzdá ako hodnota pre vlastnosti CSS a index sa nastaví na hodnotu “ j “premenná. Táto premenná sa zakaždým zvýši o jednu a reštartuje sa od „ 0 ” index, keď hodnota dosiahne “ 8 “. Pretože maximálny index v poli je „ 7 “.
- Potom vytvorte vybraný „ div prvok s ID „ hgg “, farba pozadia tohto prvku sa zmení po uvoľnení stlačeného tlačidla.
Náhľad webovej stránky po kompilácii:
Výstup potvrdzuje, že farba pozadia pre vybraný prvok HTML sa mení vždy, keď sa uvoľní stlačený alebo vybraný kláves. To je všetko o používaní „ klávesnica ()“ metóda.
Záver
jQuery' klávesnica ()” metóda spustí funkciu spätného volania na vybranom prvku HTML po uvoľnení stlačeného klávesu. Táto metóda nevolá pri stlačení klávesu, ale v čase uvoľnenia alebo po stlačení klávesu táto funkcia vykoná funkciu spätného volania. Tento blog vysvetlil použitie a fungovanie metódy jQuery keyup().