I scenarier som datavalidering og verifisering, blir stilen til feltelementene endret hver gang den enkelt trykkede tasten slippes av brukeren fra tastaturet. Denne endringen av stilen i forhold til hvert tastetrykk eller slipp utføres via hendelsesbehandlere levert av jQuery. For å være spesifikk, hendelsesbehandleren eller metoden som behandler eller påkaller funksjonen når en trykket tast slippes er ' tastetrykk ()»-metoden.
På den annen side, metoden som håndterer eller påkaller funksjonstasten blir trykket er ' tastene ned ()»-metoden og du kan sjekke vår tilknyttede artikkel for dette arrangementet.
I denne bloggen vil vi gi en kort beskrivelse av jQuery keyup()-metoden.
Hvordan bruker jeg jQuery keyup()-metoden?
jQuery ' tastetrykk ()»-metoden utløser den anonyme funksjonen hver gang brukeren slutter å trykke eller skrive inn tastene i det valgte feltet. Denne metoden brukes også til å bruke dynamisk styling over det valgte elementet i sanntid.
Syntaks
Syntaksen som brukes for keyup() jQuery-metoden er som følger:
$ ( 'dette' ) . tastetrykk ( customFunc )
I syntaksen ovenfor, ' dette ' er det valgte HTML-elementet, og ' customFunc ' er en funksjon som utføres av ' tastetrykk '-metoden over ' dette '.
La oss ha et par eksempler for en dypere forståelse.
Eksempel 1: Endre tekstfargen ved å bruke 'keyup()'-metoden
I dette tilfellet vil fargen på den angitte teksten endres til en annen farge når brukeren slipper den allerede trykket tasten som vist nedenfor:
< html >
< hode >
< manus src = 'https://code.jquery.com/jquery-3.7.0.js' >< / manus >
< manus >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('farge', 'skoggrønn');
});
});
< / manus >
< / hode >
< kropp >
< div >
Skriv inn Linuxhint-data: < input id = 'demo' type = 'tekst' / >
< / div >
< / kropp >
< / html >
Beskrivelsen av koden ovenfor er nevnt nedenfor:
- Først importerer du jQuery til prosjektet ved å sette inn dets online CDN ved å besøke dette link av offisiell dokumentasjon.
- Deretter oppretter du en anonym funksjon som vil bli kalt når ' dokument ” eller siden lastes inn. Denne funksjonen velger HTML-elementet med en id på 'demo' og legger ved ' tastetrykk ()»-metoden med den.
- « tastetrykk ()'-metoden påkaller tilbakeringingsfunksjonen som bruker ' css ()' for å sette skriftfargen på teksten til ' Skoggrønn '.
- Opprett nå den valgte '< input >'-elementet inne i '< kropp >'-taggen og tilordne den en ID av ' demo '.
Forhåndsvisning av nettsiden etter at kompileringsprosessen er fullført:
Utgangen viser fargen på teksten endres når den valgte tasten er sluppet.
Eksempel 2: Endre bakgrunnsfargen dynamisk
I dette eksemplet vil forskjellige bakgrunnsfarger settes for det valgte HTML-elementet hver gang brukeren forlater den trykket tasten. La oss ta en titt på koden for dette scenariet:
< hode >< manus src = 'https://code.jquery.com/jquery-3.7.0.js' >< / manus >
< manus >
la bakgrunnsnyanser = [ 'akvamarin' , 'oransje rød' , 'kadettblå' , 'Skoggrønn' ,
'lysegrå' , 'sandbrun' , 'magenta' , 'burlywood' ] ;
la j = 0 ;
$ ( dokument ) .keyup ( funksjon ( begivenhet ) {
$ ( '#Hg g' ) .css ( 'bakgrunnsfarge' , bakgrunnsnyanser [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / manus >
< / hode >
< kropp >
< h1 stil = 'farge: sjøgrønn' >Linuxhint-artikkel< / h1 >< br >
< div id = 'Hg g' stil = 'polstring: 10px' >
< h2 >jQuery keyup Brukes til å angi forskjellig Bakgrunn hver gang når tasten slippes.< / h2 >
< br / >
< / div >
< / kropp >
Beskrivelse av koden ovenfor:
- Importer først jQuery i prosjektet ditt ved å legge til jQuery CDN i «< hode >” tag.
- Deretter oppretter du en matrise som heter ' bakgrunnsnyanser ” som inneholder åtte tilfeldige farger.
- Deretter ' tastetrykk ()»-metoden er knyttet til « dokument ” og den påkaller en anonym tilbakeringingsfunksjon. Denne funksjonen velger HTML-elementet med en id på ' Hg g ' og bruker CSS ' bakgrunnsfarge ' eiendom.
- Matrisen ' bakgrunnsnyanser ' sendes som verdien for CSS-egenskapene og indeksen settes til ' j variabel. Denne variabelen økes med én hver gang og starter på nytt fra ' 0 ' indeks når verdien når ' 8 '. Fordi maksindeksen i matrisen er ' 7 '.
- Deretter oppretter du en valgt ' div ' element med en id på ' Hg g ”, vil bakgrunnsfargen til dette elementet endres når den trykkede tasten slippes.
Forhåndsvisning av nettsiden etter kompileringen:
Utdata bekrefter at bakgrunnsfargen for det valgte HTML-elementet endres hver gang den trykket eller valgte tasten slippes. Det handler om å bruke ' tastetrykk ()»-metoden.
Konklusjon
jQuery ' tastetrykk ()”-metoden utløser en tilbakeringingsfunksjon på det valgte HTML-elementet når den trykket tasten er sluppet. Denne metoden kaller ikke når tasten trykkes, men når den slippes eller på tasten opp, utfører denne funksjonen en tilbakeringingsfunksjon. Denne bloggen har forklart bruken og virkemåten til jQuery keyup()-metoden.