I scenarier som datavalidering og verifikation ændres stilen af feltelementerne, hver gang den enkelte tast slippes af brugeren fra tastaturet. Denne ændring af stil i forhold til hvert tastetryk eller frigivelse udføres via hændelseshandlere leveret af jQuery. For at være specifik er hændelsesbehandleren eller metoden, der behandler eller påkalder funktionen, når en trykket tast slippes, ' tastetryk ()” metode.
På den anden side bliver den metode, der håndterer eller påkalder funktionstasten, trykket er ' tasten ned ()” metode, og du kan tjekke vores tilknyttede artikel til denne begivenhed.
I denne blog vil vi give en kort beskrivelse af jQuery keyup() metoden.
Hvordan bruger man jQuery keyup()-metoden?
jQuery ' tastetryk ()”-metoden udløser den anonyme funktion, når brugeren holder op med at trykke på eller indtaste tasterne i det valgte felt. Denne metode bruges også til at anvende dynamisk styling over det valgte element i realtid.
Syntaks
Syntaksen, der bruges til keyup() jQuery-metoden er som følger:
$ ( 'det her' ) . tastetryk ( customFunc )
I ovenstående syntaks, ' det her ' er det valgte HTML-element, og ' customFunc ' er en funktion, der udføres af ' tastetryk ” metode over ” det her ”.
Lad os få et par eksempler for en dybere forståelse.
Eksempel 1: Ændring af tekstfarven ved hjælp af 'keyup()'-metoden
I dette tilfælde vil farven på den indtastede tekst blive ændret til en anden farve, når brugeren slipper den allerede trykket tast som vist nedenfor:
< html >
< hoved >
< manuskript src = 'https://code.jquery.com/jquery-3.7.0.js' >< / manuskript >
< manuskript >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('farve', 'skovgrøn');
});
});
< / manuskript >
< / hoved >
< legeme >
< div >
Indtast Linuxhint-data: < input id = 'demo' type = 'tekst' / >
< / div >
< / legeme >
< / html >
Beskrivelsen af ovenstående kode er nævnt nedenfor:
- Først skal du importere jQuery til projektet ved at indsætte dets online CDN ved at besøge dette link af officiel dokumentation.
- Opret derefter en anonym funktion, der vil blive kaldt, når ' dokument ” eller siden bliver indlæst. Denne funktion vælger HTML-elementet med et id på 'demo' og vedhæfter ' tastetryk ()” metode med det.
- Det ' tastetryk ()'-metoden kalder tilbagekaldsfunktionen, som bruger ' css ()' for at indstille skriftfarven på teksten til ' skovgrøn ”.
- Opret nu den valgte '< input >'-elementet inde i '< legeme >' tag og tildel det et id af ' demo ”.
Forhåndsvisning af websiden efter færdiggørelsen af kompileringsprocessen:
Outputtet viser farven på teksten, når den valgte tast er blevet sluppet.
Eksempel 2: Ændring af baggrundsfarven dynamisk
I dette eksempel vil forskellige baggrundsfarver blive indstillet for det valgte HTML-element, hver gang brugeren forlader den nedtrykte tast. Lad os se på koden for dette scenarie:
< hoved >< manuskript src = 'https://code.jquery.com/jquery-3.7.0.js' >< / manuskript >
< manuskript >
lad baggrundShades = [ 'akvamarin' , 'orange' , 'kadetblå' , 'skovgrøn' ,
'lysegrå' , 'sandbrun' , 'magenta' , 'burlywood' ] ;
lad j = 0 ;
$ ( dokument ) .keyup ( fungere ( begivenhed ) {
$ ( '#hgg' ) .css ( 'baggrundsfarve' , baggrundsnuancer [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / manuskript >
< / hoved >
< legeme >
< h1 stil = 'farve: havgrøn' >Linuxhint-artikel< / h1 >< br >
< div id = 'hgg' stil = 'polstring: 10px' >
< h2 >jQuery keyup Bruges til at indstille anderledes Baggrund hver gang, når tasten slippes.< / h2 >
< br / >
< / div >
< / legeme >
Beskrivelse af ovenstående kode:
- Importer først jQuery i dit projekt ved at tilføje jQuery CDN inde i '< hoved >” tag.
- Opret derefter et array med navnet ' baggrundsnuancer ” som indeholder otte tilfældige farver.
- Dernæst ' tastetryk ()'-metoden er knyttet til ' dokument ” og det påkalder en anonym tilbagekaldsfunktion. Denne funktion vælger HTML-elementet med et id på ' hgg ' og anvender CSS ' baggrundsfarve ” ejendom.
- Arrayet' baggrundsnuancer ' videregives som værdien for CSS-egenskaberne, og indekset indstilles til ' j ' variabel. Denne variabel øges med én hver gang og genstarter fra ' 0 ' indeks når værdien når ' 8 ”. Fordi det maksimale indeks i arrayet er ' 7 ”.
- Derefter skal du oprette en valgt ' div ' element med et id på ' hgg ”, vil baggrundsfarven på dette element blive ændret, når den trykkede tast slippes.
Forhåndsvisning af websiden efter kompileringen:
Outputtet bekræfter, at baggrundsfarven for det valgte HTML-element ændres, hver gang den trykkede eller valgte tast slippes. Det handler om at bruge ' tastetryk ()” metode.
Konklusion
jQuery ' tastetryk ()”-metoden udløser en tilbagekaldsfunktion på det valgte HTML-element, når den trykkede tast er blevet sluppet. Denne metode kalder ikke, når tasten trykkes, men på tidspunktet for frigivelse eller på tasten op udfører denne funktion en tilbagekaldsfunktion. Denne blog har forklaret brugen og virkemåden af jQuery keyup() metoden.