Skenaarioissa, kuten tietojen validoinnissa ja todentamisessa, kenttäelementtien tyyli muuttuu aina, kun käyttäjä vapauttaa yksittäisen painetun näppäimen näppäimistöltä. Tämä tyylin muutos suhteessa jokaiseen näppäimen painallukseen tai vapauttamiseen suoritetaan jQueryn tarjoamien tapahtumakäsittelijöiden kautta. Tarkemmin sanottuna tapahtumakäsittelijä tai menetelmä, joka käsittelee tai kutsuu toiminnon, kun mitä tahansa painettua näppäintä vapautetaan, on ' avaimet ()' menetelmällä.
Toisaalta menetelmä, joka käsittelee tai kutsuu toimintonäppäimen painamisen, on ' näppäin alas ()' -menetelmällä ja voit tarkistaa liittyvät artikla tätä tapahtumaa varten.
Tässä blogissa annamme lyhyen kuvauksen jQuery keyup() -menetelmästä.
Kuinka käyttää jQuery keyup() -menetelmää?
jQuery' avaimet ()' -menetelmä laukaisee anonyymin toiminnon aina, kun käyttäjä lopettaa painamisen tai näppäimien syöttämisen valitun kentän sisällä. Tätä menetelmää käytetään myös dynaamisen tyylin soveltamiseen valitulle elementille reaaliajassa.
Syntaksi
Keyup() jQuery -menetelmässä käytetty syntaksi on seuraava:
$ ( 'Tämä' ) . avaimet ( customFunc )
Yllä olevassa syntaksissa ' Tämä ' on valittu HTML-elementti ja ' customFunc ' on toiminto, jonka ' suorittaa avaimet '-menetelmä' Tämä ”.
Otetaan pari esimerkkiä syvempää ymmärtämistä varten.
Esimerkki 1: Tekstin värin muuttaminen 'keyup()'-menetelmällä
Tässä tapauksessa syötetyn tekstin väri muuttuu toiseksi, kun käyttäjä vapauttaa jo painetun näppäimen alla olevan kuvan mukaisesti:
< html >
< pää >
< käsikirjoitus src = 'https://code.jquery.com/jquery-3.7.0.js' >< / käsikirjoitus >
< käsikirjoitus >
$(dokumentti).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('väri', 'metsänvihreä');
});
});
< / käsikirjoitus >
< / pää >
< kehon >
< div >
Anna Linuxhint-tiedot: < syöttö id = 'demo' tyyppi = 'teksti' / >
< / div >
< / kehon >
< / html >
Yllä olevan koodin kuvaus on mainittu alla:
- Tuo ensin jQuery projektiin lisäämällä sen online-CDN käymällä tässä linkki virallisesta dokumentaatiosta.
- Luo seuraavaksi anonyymi funktio, jota kutsutaan, kun ' asiakirja ' tai sivu latautuu. Tämä toiminto valitsee HTML-elementin tunnuksella 'demo' ja liittää ' avaimet ()' -menetelmän kanssa.
- ' avaimet ()' -menetelmä kutsuu takaisinsoittotoiminnon, joka käyttää ' css ()' asettaaksesi tekstin fontin väriksi ' metsänvihreä ”.
- Luo nyt valittu '< syöttö >'-elementti '<:n sisällä kehon >' -tunniste ja anna sille tunnus ' demo ”.
Verkkosivun esikatselu kokoamisprosessin päätyttyä:
Tulos näyttää tekstin värin muuttumisen, kun valittu näppäin on vapautettu.
Esimerkki 2: Taustavärin muuttaminen dynaamisesti
Tässä esimerkissä valitulle HTML-elementille asetetaan erilaiset taustavärit aina, kun käyttäjä poistuu painetusta näppäimestä. Katsotaanpa tämän skenaarion koodia:
< pää >< käsikirjoitus src = 'https://code.jquery.com/jquery-3.7.0.js' >< / käsikirjoitus >
< käsikirjoitus >
anna backgroundShades = [ 'akvamariini' , 'oranssinpunainen' , 'cadetblue' , 'metsänvihreä' ,
'vaalean harmaa' , 'hiekanruskea' , 'magenta' , 'burlywood' ] ;
anna j = 0 ;
$ ( asiakirja ) .keyup ( toiminto ( tapahtuma ) {
$ ( '#hgg' ) .css ( 'taustaväri' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / käsikirjoitus >
< / pää >
< kehon >
< h1 tyyli = 'väri: merenvihreä' >Linuxhint-artikkeli< / h1 >< br >
< div id = 'hgg' tyyli = 'täyte: 10px' >
< h2 >jQuery-näppäin Käytetään määrittämään eri Tausta joka kerta kun avain vapautetaan.< / h2 >
< br / >
< / div >
< / kehon >
Kuvaus yllä olevasta koodista:
- Aluksi tuo jQuery projektiisi lisäämällä jQuery CDN '<' pää >' -tunniste.
- Luo sitten taulukko nimeltä ' backgroundShades ', joka sisältää kahdeksan satunnaista väriä.
- Seuraavaksi ' avaimet ()' -menetelmä on liitetty ' asiakirja ' ja se kutsuu anonyymin takaisinsoittotoiminnon. Tämä toiminto valitsee HTML-elementin, jonka tunnus on ' hgg ' ja käyttää CSS:ää' taustaväri ” omaisuutta.
- Joukko' backgroundShades ' välitetään arvoksi CSS-ominaisuuksille ja indeksiksi asetetaan ' j ”muuttuja. Tätä muuttujaa kasvatetaan yhdellä joka kerta ja se alkaa uudelleen ' 0 'indeksi, kun arvo saavuttaa ' 8 ”. Koska taulukon maksimiindeksi on ' 7 ”.
- Luo sen jälkeen valittu ' div ' elementti, jonka tunnus on ' hgg ”, tämän elementin taustaväri muuttuu, kun painettu näppäin vapautetaan.
Verkkosivun esikatselu kokoamisen jälkeen:
Tulos vahvistaa, että valitun HTML-elementin taustaväri muuttuu joka kerta, kun painettu tai valittu näppäin vapautetaan. Siinä on kyse ' avaimet ()' menetelmällä.
Johtopäätös
jQuery' avaimet ()”-menetelmä laukaisee takaisinsoittotoiminnon valitulle HTML-elementille, kun painettu näppäin on vapautettu. Tämä menetelmä ei soita, kun näppäintä painetaan, mutta vapauttamisen tai näppäimen ollessa ylös tämä toiminto suorittaa takaisinsoittotoiminnon. Tässä blogissa on selostettu jQuery keyup()-menetelmän käyttöä ja toimintaa.