Ve scénářích, jako je validace a verifikace dat, se styl prvků pole změní vždy, když uživatel uvolní jedinou stisknutou klávesu z klávesnice. Tato změna stylu vzhledem ke každému stisknutí nebo uvolnění klávesy se provádí pomocí obslužných rutin událostí poskytovaných jQuery. Abychom byli konkrétní, obslužná rutina události nebo metoda, která poskytuje nebo vyvolává funkci, když se uvolní jakákoli stisknutá klávesa, je „ klíčování ()“ metoda.
Na druhou stranu metoda, která zpracovává nebo vyvolává stisknutí funkční klávesy, je „ keydown ()“ metodu a můžete zkontrolovat naši přidruženou článek pro tuto akci.
V tomto blogu poskytneme stručný popis metody jQuery keyup().
Jak používat metodu jQuery keyup()?
jQuery' klíčování ()” metoda spouští anonymní funkci vždy, když uživatel přestane tisknout nebo zadávat klávesy ve vybraném poli. Tato metoda se také používá k aplikaci dynamického stylu na vybraný prvek v reálném čase.
Syntax
Syntaxe použitá pro metodu keyup() jQuery je následující:
$ ( 'tento' ) . klíčování ( customFunc )
Ve výše uvedené syntaxi „ tento ' je vybraný prvek HTML a ' customFunc “ je funkce, kterou provádí „ klíčování “ metoda přes “ tento “.
Uveďme si pár příkladů pro hlubší pochopení.
Příklad 1: Změna barvy textu pomocí metody „keyup()“.
V tomto případě se barva zadaného textu změní na jinou barvu, když uživatel uvolní již stisknutou klávesu, jak je znázorněno níže:
< html >
< hlava >
< skript src = 'https://code.jquery.com/jquery-3.7.0.js' < / skript >
< skript >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('barva', 'lesní zeleň');
});
});
< / skript >
< / hlava >
< tělo >
< div >
Zadejte data Linuxhint: < vstup id = 'demo' typ = 'text' / >
< / div >
< / tělo >
< / html >
Popis výše uvedeného kódu je uveden níže:
- Nejprve importujte jQuery do projektu vložením jeho online CDN na této stránce odkaz oficiální dokumentace.
- Dále vytvořte anonymní funkci, která bude volána, když „ dokument “ nebo se stránka načte. Tato funkce vybere prvek HTML s ID „demo“ a připojí „ klíčování ()“ metoda s tím.
- ' klíčování ()“ metoda vyvolá funkci zpětného volání, která používá „ css ()“ pro nastavení barvy písma textu na „ lesní zelená “.
- Nyní vytvořte vybrané „< vstup >“ prvek uvnitř „< tělo >“ a přiřaďte mu id „ demo “.
Náhled webové stránky po dokončení procesu kompilace:
Výstup zobrazuje změny barvy textu po uvolnění vybrané klávesy.
Příklad 2: Dynamická změna barvy pozadí
V tomto příkladu budou nastaveny různé barvy pozadí pro vybraný prvek HTML, kdykoli uživatel opustí stisknutou klávesu. Pojďme se podívat na kód pro tento scénář:
< hlava >< skript src = 'https://code.jquery.com/jquery-3.7.0.js' < / skript >
< skript >
nech pozadíShades = [ 'akvamarín' , 'oranžová červená' , 'cadetblue' , 'lesní zeleň' ,
'světle šedá' , 'sandybrown' , 'purpurová' , 'burlywood' ] ;
nechť j = 0 ;
$ ( dokument ) .keyup ( funkce ( událost ) {
$ ( '#hgg' ) .css ( 'barva pozadí' , pozadíShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / skript >
< / hlava >
< tělo >
< h1 styl = 'barva: mořská zelená' >Článek o Linuxu< / h1 < br >
< div id = 'hgg' styl = 'výplň: 10px' >
< h2 >Klávesa jQuery Slouží k nastavení různých Pozadí pokaždé, když je klíč uvolněn.< / h2 >
< br / >
< / div >
< / tělo >
Popis výše uvedeného kódu:
- Zpočátku importujte jQuery do svého projektu přidáním jQuery CDN do „< hlava >“ tag.
- Poté vytvořte pole s názvem „ pozadíShades “, který obsahuje osm náhodných barev.
- Dále, „ klíčování ()“ metoda je připojena k „ dokument “ a vyvolá funkci anonymního zpětného volání. Tato funkce vybere prvek HTML s ID „ hgg “ a použije CSS „ barva pozadí ' vlastnictví.
- Pole ' pozadíShades ” je předán jako hodnota pro vlastnosti CSS a index je nastaven na hodnotu “ j “proměnná. Tato proměnná se pokaždé zvýší o jednu a restartuje se od „ 0 ” index, když hodnota dosáhne “ 8 “. Protože maximální index v poli je „ 7 “.
- Poté vytvořte vybraný „ div prvek s ID „ hgg “, barva pozadí tohoto prvku se změní po uvolnění stisknuté klávesy.
Náhled webové stránky po kompilaci:
Výstup potvrzuje, že se barva pozadí pro vybraný prvek HTML mění pokaždé, když se uvolní stisknutá nebo vybraná klávesa. To je vše o použití „ klíčování ()“ metoda.
Závěr
jQuery' klíčování ()” metoda spouští funkci zpětného volání na vybraném prvku HTML, když je stisknutá klávesa uvolněna. Tato metoda nevolá při stisku klávesy, ale v době uvolnění nebo při zvednutí klávesy tato funkce provede funkci zpětného volání. Tento blog vysvětlil použití a fungování metody jQuery keyup().