In Szenarien wie der Datenvalidierung und -verifizierung wird der Stil der Feldelemente immer dann geändert, wenn der Benutzer die einzelne gedrückte Taste von der Tastatur loslässt. Diese Stiländerung relativ zu jedem Tastendruck oder Loslassen wird über von jQuery bereitgestellte Ereignishandler durchgeführt. Genauer gesagt ist der Ereignishandler oder die Methode, die die Funktion ausführt oder aufruft, wenn eine gedrückte Taste losgelassen wird, „ keyup ()' Methode.
Andererseits ist die Methode, die das Drücken der Funktionstaste verarbeitet oder aufruft, die „ Taste nach unten ()“-Methode und Sie können unsere zugehörige Methode überprüfen Artikel für diese Veranstaltung.
In diesem Blog geben wir eine kurze Beschreibung der jQuery-Methode keyup().
Wie verwende ich die jQuery-Methode keyup()?
Die jQuery „ keyup ()“-Methode löst die anonyme Funktion immer dann aus, wenn der Benutzer aufhört, die Tasten im ausgewählten Feld zu drücken oder einzugeben. Diese Methode wird auch verwendet, um in Echtzeit dynamische Stile auf das ausgewählte Element anzuwenden.
Syntax
Die für die jQuery-Methode keyup() verwendete Syntax lautet wie folgt:
$ ( 'Das' ) . keyup ( customFunc )
In der obigen Syntax: „ Das „ ist das ausgewählte HTML-Element und „ customFunc „ ist eine Funktion, die von „ ausgeführt wird. keyup ”-Methode über die „ Das “.
Schauen wir uns ein paar Beispiele für ein tieferes Verständnis an.
Beispiel 1: Ändern der Textfarbe mit der Methode „keyup()“.
In diesem Fall wird die Farbe des eingegebenen Texts in eine andere Farbe geändert, wenn der Benutzer die bereits gedrückte Taste loslässt, wie unten gezeigt:
< html >
< Kopf >
< Skript src = „https://code.jquery.com/jquery-3.7.0.js“ >< / Skript >
< Skript >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / Skript >
< / Kopf >
< Körper >
< div >
Geben Sie Linuxhint-Daten ein: < Eingang Ausweis = 'Demo' Typ = 'Text' / >
< / div >
< / Körper >
< / html >
Die Beschreibung des obigen Codes ist unten aufgeführt:
- Importieren Sie zunächst jQuery in das Projekt, indem Sie dessen Online-CDN einfügen, indem Sie dies besuchen Verknüpfung der offiziellen Dokumentation.
- Erstellen Sie als Nächstes eine anonyme Funktion, die aufgerufen wird, wenn „ dokumentieren ” oder Seite wird geladen. Diese Funktion wählt das HTML-Element mit der ID „demo“ aus und hängt das „ keyup ()“-Methode damit.
- Der ' keyup ()“-Methode ruft die Callback-Funktion auf, die die „ CSS ()“, um die Schriftfarbe des Textes auf „ Waldgrün “.
- Erstellen Sie nun das ausgewählte „< Eingang >“-Element innerhalb des „< Körper >“-Tag und weisen Sie ihm die ID „ Demo “.
Vorschau der Webseite nach Abschluss des Kompilierungsvorgangs:
Die Ausgabe zeigt, dass sich die Farbe des Textes ändert, wenn die ausgewählte Taste losgelassen wird.
Beispiel 2: Dynamische Änderung der Hintergrundfarbe
In diesem Beispiel werden unterschiedliche Hintergrundfarben für das ausgewählte HTML-Element festgelegt, wenn der Benutzer die gedrückte Taste verlässt. Schauen wir uns den Code für dieses Szenario an:
< Kopf >< Skript src = „https://code.jquery.com/jquery-3.7.0.js“ >< / Skript >
< Skript >
Lassen Sie den HintergrundSchatten = [ 'Aquamarin' , 'Orange Rot' , 'Kadettenblau' , 'Waldgrün' ,
'hellgrau' , 'sandbraun' , 'Magenta' , 'kräftiges Holz' ] ;
lass j = 0 ;
$ ( dokumentieren ) .keyup ( Funktion ( Ereignis ) {
$ ( '#hgg' ) .css ( 'Hintergrundfarbe' , HintergrundSchatten [ J ] ) ;
j++;
J = J % 9 ;
} ) ;
< / Skript >
< / Kopf >
< Körper >
< h1 Stil = „Farbe: Seegrün“ >Linuxhint-Artikel< / h1 >< br >
< div Ausweis = 'hgg' Stil = „Auffüllung: 10 Pixel“ >
< h2 >jQuery-Keyup wird zum Festlegen von Unterschieden verwendet Hintergrund jedes Mal, wenn der Schlüssel losgelassen wird.< / h2 >
< br / >
< / div >
< / Körper >
Beschreibung des obigen Codes:
- Importieren Sie zunächst jQuery in Ihr Projekt, indem Sie jQuery CDN innerhalb der Zeile „< Kopf >“-Tag.
- Erstellen Sie dann ein Array mit dem Namen „ HintergrundSchatten “, das acht zufällige Farben enthält.
- Als nächstes wird das „ keyup ()“-Methode ist an die „ dokumentieren ” und es ruft eine anonyme Rückruffunktion auf. Diese Funktion wählt das HTML-Element mit der ID „ hgg ” und wendet das CSS an „ Hintergrundfarbe ' Eigentum.
- Das Array „ HintergrundSchatten „ wird als Wert für die CSS-Eigenschaften übergeben und der Index wird auf „ J ” variabel. Diese Variable wird jedes Mal um eins erhöht und startet von „ 0 „Index, wenn der Wert erreicht“ 8 “. Weil der maximale Index im Array „ 7 “.
- Erstellen Sie anschließend ein ausgewähltes „ div ” Element mit der ID „ hgg “, wird die Hintergrundfarbe dieses Elements geändert, wenn die gedrückte Taste losgelassen wird.
Vorschau der Webseite nach der Zusammenstellung:
Die Ausgabe bestätigt, dass sich die Hintergrundfarbe für das ausgewählte HTML-Element jedes Mal ändert, wenn die gedrückte oder ausgewählte Taste losgelassen wird. Dabei geht es um die Verwendung des „ keyup ()' Methode.
Abschluss
Die jQuery „ keyup ()“-Methode löst eine Callback-Funktion für das ausgewählte HTML-Element aus, wenn die gedrückte Taste losgelassen wurde. Diese Methode ruft nicht auf, wenn die Taste gedrückt wird, aber beim Loslassen oder beim Drücken der Taste führt diese Funktion eine Rückruffunktion aus. In diesem Blog wurde die Verwendung und Funktionsweise der jQuery-Methode keyup() erläutert.