In scenario's zoals gegevensvalidatie en -verificatie wordt de stijl van de veldelementen gewijzigd wanneer de gebruiker de enkele ingedrukte toets van het toetsenbord loslaat. Deze verandering van stijl ten opzichte van elke toetsaanslag of release wordt uitgevoerd via gebeurtenishandlers van jQuery. Om specifiek te zijn, de gebeurtenishandler of methode die de functie behandelt of aanroept wanneer een ingedrukte toets wordt losgelaten, is de “ sleutelop ()” methode.
Aan de andere kant is de methode die de functietoets verwerkt of aanroept, de “ toets neer ()”-methode en u kunt onze bijbehorende artikel voor dit evenement.
In deze blog geven we een korte beschrijving van de methode jQuery keyup().
Hoe gebruik ik de jQuery keyup()-methode?
De jQuery “ sleutelop ()”-methode activeert de anonieme functie wanneer de gebruiker stopt met het indrukken of invoeren van de toetsen binnen het geselecteerde veld. Deze methode wordt ook gebruikt om in realtime dynamische styling op het geselecteerde element toe te passen.
Syntaxis
De syntaxis die wordt gebruikt voor de jQuery-methode keyup() is als volgt:
$ ( 'dit' ) . sleutelop ( aangepastFunc )
In de bovenstaande syntaxis: “ dit ” is het geselecteerde HTML-element, en “ aangepastFunc ' is een functie die wordt uitgevoerd door de ' sleutelop 'methode boven de' dit ”.
Laten we een paar voorbeelden hebben voor een dieper begrip.
Voorbeeld 1: De tekstkleur wijzigen met behulp van de “keyup()”-methode
In dit geval wordt de kleur van de ingevoerde tekst gewijzigd in een andere kleur wanneer de gebruiker de reeds ingedrukte toets loslaat, zoals hieronder weergegeven:
< html >
< hoofd >
< script src = 'https://code.jquery.com/jquery-3.7.0.js' >< / script >
< script >
$(document).ready(functie() {
$('#demo').keyup(function() {
$('#demo').css('kleur', 'bosgroen');
});
});
< / script >
< / hoofd >
< lichaam >
< div >
Voer Linuxhint-gegevens in: < invoer ID kaart = 'demonstratie' type = 'tekst' / >
< / div >
< / lichaam >
< / html >
De beschrijving van de bovenstaande code wordt hieronder vermeld:
- Importeer eerst jQuery in het project door het online CDN in te voegen door dit te bezoeken koppeling van officiële documentatie.
- Maak vervolgens een anonieme functie die wordt aangeroepen wanneer de “ document ' of de pagina wordt geladen. Deze functie selecteert het HTML-element met de id “demo” en voegt de “ sleutelop ()”methode mee.
- De ' sleutelop ()”-methode roept de callback-functie aan die gebruik maakt van de “ css ()” om de letterkleur van de tekst in te stellen op “ Bos Groen ”.
- Maak nu de geselecteerde “< invoer >”-element binnen de “< lichaam >” tag en wijs er de id “ demonstratie ”.
Voorbeeld van de webpagina na voltooiing van het compilatieproces:
De uitvoer laat zien dat de kleur van de tekst verandert wanneer de geselecteerde toets wordt losgelaten.
Voorbeeld 2: De achtergrondkleur dynamisch wijzigen
In dit voorbeeld worden verschillende achtergrondkleuren ingesteld voor het geselecteerde HTML-element wanneer de gebruiker de ingedrukte toets verlaat. Laten we de code voor dit scenario eens bekijken:
< hoofd >< script src = 'https://code.jquery.com/jquery-3.7.0.js' >< / script >
< script >
laat achtergrondShades = [ 'aquamarijn' , 'Oranje rood' , 'cadetblauw' , 'Bos Groen' ,
'lichtgrijs' , 'zandbruin' , 'magenta' , 'knoestig hout' ] ;
laat j = 0 ;
$ ( document ) .toets omhoog ( functie ( evenement ) {
$ ( '#hgg' ) .css ( 'Achtergrond kleur' , achtergrondShades [ J ] ) ;
j++;
J = J % 9 ;
} ) ;
< / script >
< / hoofd >
< lichaam >
< h1 stijl = 'kleur: zeegroen' >Linuxhint-artikel< / h1 >< br >
< div ID kaart = 'hgg' stijl = 'opvulling: 10px' >
< h2 >jQuery-toets Gebruikt om Anders in te stellen Achtergrond elke keer dat de sleutel wordt losgelaten.< / h2 >
< br / >
< / div >
< / lichaam >
Beschrijving van de bovenstaande code:
- Importeer in eerste instantie de jQuery in uw project door jQuery CDN toe te voegen binnen de “< hoofd >” label.
- Maak vervolgens een array met de naam “ achtergrondShades ”die acht willekeurige kleuren bevat.
- Vervolgens wordt de “ sleutelop ()”methode is gekoppeld aan de “ document ' en het roept een anonieme terugbelfunctie op. Deze functie selecteert het HTML-element met de id “ hgg ” en past de CSS toe “ Achtergrond kleur ' eigendom.
- De reeks “ achtergrondShades ” wordt doorgegeven als de waarde voor de CSS-eigenschappen en de index wordt ingesteld op de “ J Variabel. Deze variabele wordt elke keer met één verhoogd en begint opnieuw vanaf het punt “ 0 ” index wanneer de waarde “ bereikt 8 ”. Omdat de maximale index in de array “ 7 ”.
- Maak daarna een geselecteerde “ div ”-element met de id “ hgg ”, zal de achtergrondkleur van dit element veranderen wanneer de ingedrukte toets wordt losgelaten.
Preview van de webpagina na de compilatie:
De uitvoer bevestigt dat de achtergrondkleur voor het geselecteerde HTML-element verandert telkens wanneer de ingedrukte of geselecteerde toets wordt losgelaten. Dat gaat allemaal over het gebruik van de “ sleutelop ()” methode.
Conclusie
De jQuery “ sleutelop ()”-methode activeert een callback-functie op het geselecteerde HTML-element wanneer de ingedrukte toets wordt losgelaten. Deze methode roept niet op wanneer de toets wordt ingedrukt, maar op het moment van loslaten of bij het omhoog drukken van de toets voert deze functie een terugbelfunctie uit. In deze blog wordt het gebruik en de werking van de methode jQuery keyup() uitgelegd.