In scenari come la convalida e la verifica dei dati, lo stile degli elementi del campo viene modificato ogni volta che l'utente rilascia il singolo tasto premuto dalla tastiera. Questo cambiamento di stile relativo a ogni pressione o rilascio di un tasto viene eseguito tramite gestori di eventi forniti da jQuery. Per essere precisi, il gestore di eventi o il metodo che gestisce o invoca la funzione quando viene rilasciato un tasto premuto è il ' keyup ()' metodo.
D'altra parte, il metodo che gestisce o richiama il tasto funzione che viene premuto è il ' keydown ()” e puoi controllare il nostro associato articolo per questo evento.
In questo blog forniremo una breve descrizione del metodo jQuery keyup().
Come utilizzare il metodo jQuery keyup()?
Il jQuery “ keyup ()” attiva la funzione anonima ogni volta che l'utente smette di premere o inserire i tasti all'interno del campo selezionato. Questo metodo viene utilizzato anche per applicare uno stile dinamico sull'elemento selezionato in tempo reale.
Sintassi
La sintassi utilizzata per il metodo jQuery keyup() è la seguente:
$ ( 'Questo' ) . keyup ( customFunz )
Nella sintassi precedente, ' Questo ' è l'elemento HTML selezionato e ' customFunz ' è una funzione eseguita da ' keyup 'metodo' rispetto al ' Questo ”.
Facciamo un paio di esempi per una comprensione più profonda.
Esempio 1: modifica del colore del testo utilizzando il metodo 'keyup()'.
In questo caso, il colore del testo inserito verrà cambiato in un colore diverso quando l'utente rilascia il tasto già premuto come mostrato di seguito:
< html >
< Testa >
< sceneggiatura src = 'https://code.jquery.com/jquery-3.7.0.js' >< / sceneggiatura >
< sceneggiatura >
$(documento).ready(funzione() {
$('#demo').keyup(funzione() {
$('#demo').css('colore', 'verdeforesta');
});
});
< / sceneggiatura >
< / Testa >
< corpo >
< div >
Inserisci i dati Linuxhint: < ingresso id = 'dimostrazione' tipo = 'testo' / >
< / div >
< / corpo >
< / html >
La descrizione del codice di cui sopra è menzionata di seguito:
- Per prima cosa importa jQuery nel progetto inserendo il suo CDN online visitando questo collegamento di documentazione ufficiale.
- Successivamente, crea una funzione anonima che verrà chiamata quando il ' documento ' o la pagina viene caricata. Questa funzione seleziona l'elemento HTML con un ID 'demo' e allega il ' keyup ()” con esso.
- IL ' keyup ()' richiama la funzione di callback che utilizza il metodo ' css ()” per impostare il colore del carattere del testo su “ verde foresta ”.
- Ora crea il file '< ingresso >' all'interno dell'elemento '< corpo >' tag e assegnagli un ID ' demo ”.
Anteprima della pagina web dopo il completamento del processo di compilazione:
L'output mostra il colore del testo che cambia quando il tasto selezionato viene rilasciato.
Esempio 2: modifica dinamica del colore di sfondo
In questo esempio, verranno impostati colori di sfondo diversi per l'elemento HTML selezionato ogni volta che l'utente lascia il tasto premuto. Diamo un'occhiata al codice per questo scenario:
< Testa >< sceneggiatura src = 'https://code.jquery.com/jquery-3.7.0.js' >< / sceneggiatura >
< sceneggiatura >
lascia backgroundShades = [ 'acquamarina' , 'rosso-arancio' , 'cadettoblu' , 'verde foresta' ,
'grigio chiaro' , 'marrone sabbia' , 'magenta' , 'burlywood' ] ;
lascia che j = 0 ;
$ ( documento ) .keyup ( funzione ( evento ) {
$ ( '#hgg' ) .css ( 'colore di sfondo' , sfumature di sfondo [ J ] ) ;
j++;
J = J % 9 ;
} ) ;
< / sceneggiatura >
< / Testa >
< corpo >
< h1 stile = 'colore: verde mare' >Articolo Linuxhint< / h1 >< fratello >
< div id = 'hgg' stile = 'imbottitura: 10px' >
< h2 >jQuery keyup Utilizzato per impostare diversi Sfondo ogni volta che la chiave viene rilasciata.< / h2 >
< fratello / >
< / div >
< / corpo >
Descrizione del codice sopra:
- Inizialmente, importa jQuery nel tuo progetto aggiungendo jQuery CDN all'interno del file '< Testa >' etichetta.
- Quindi, crea un array denominato ' sfondoShades ' che contiene otto colori casuali.
- Successivamente, il “ keyup ()” è allegato al metodo “ documento ' e invoca una funzione di callback anonima. Questa funzione seleziona l'elemento HTML con un ID di ' hgg ” e applica il CSS “ colore di sfondo ' proprietà.
- La matrice” sfondoShades ' viene passato come valore per le proprietà CSS e l'indice è impostato su ' J 'variabile. Questa variabile viene incrementata di uno ogni volta e riparte dal ' 0 ” indice quando il valore raggiunge “ 8 ”. Poiché l'indice massimo nell'array è ' 7 ”.
- Successivamente, crea un ' div ' elemento con un ID di ' hgg ”, il colore dello sfondo di questo elemento verrà modificato quando si rilascia il tasto premuto.
Anteprima della pagina web dopo la compilazione:
L'output conferma che il colore di sfondo per l'elemento HTML selezionato cambia ogni volta che viene rilasciato il tasto premuto o selezionato. Si tratta di usare il ' keyup ()' metodo.
Conclusione
Il jQuery “ keyup ()” attiva una funzione di callback sull'elemento HTML selezionato quando il tasto premuto viene rilasciato. Questo metodo non chiama quando viene premuto il tasto ma al momento del rilascio o quando il tasto viene premuto questa funzione esegue una funzione di callback. Questo blog ha spiegato l'utilizzo e il funzionamento del metodo jQuery keyup().