Sa mga senaryo tulad ng pagpapatunay at pag-verify ng data, ang styling ng mga elemento ng field ay nababago sa tuwing ang isang pinindot na key ay inilabas ng user mula sa keyboard. Ang pagbabagong ito ng styling na nauugnay sa bawat pagpindot o paglabas ng key ay ginagawa sa pamamagitan ng mga event handler na ibinigay ng jQuery. Upang maging tiyak, ang tagapangasiwa ng kaganapan o pamamaraan na tumatalakay o nagpapagana sa function kapag ang anumang pinindot na key ay binitawan ay ang ' susi pataas ()” paraan.
Sa kabilang banda, ang paraan na humahawak o humihiling sa function key ay pinindot ay ang ' keydown ()” at maaari mong suriin ang aming nauugnay artikulo para sa kaganapang ito.
Sa blog na ito, magbibigay kami ng maikling paglalarawan ng jQuery keyup() method.
Paano Gamitin ang jQuery keyup() Method?
Ang jQuery ' susi pataas ()' na paraan ay nagti-trigger ng anonymous na function sa tuwing hihinto ang user sa pagpindot o pagpasok ng mga key sa loob ng napiling field. Ginagamit din ang paraang ito para ilapat ang dynamic na pag-istilo sa napiling elemento nang real-time.
Syntax
Ang syntax na ginamit para sa keyup() jQuery method ay ang mga sumusunod:
$ ( 'ito' ) . susi pataas ( customFunc )
Sa syntax sa itaas, ' ito ' ay ang napiling elemento ng HTML, at ' customFunc Ang ” ay isang function na isinasagawa ng “ susi pataas 'paraan sa ibabaw ng' ito ”.
Magkaroon tayo ng ilang halimbawa para sa mas malalim na pag-unawa.
Halimbawa 1: Pagbabago ng Kulay ng Teksto Gamit ang Paraang “keyup()”.
Sa kasong ito, ang kulay ng ipinasok na teksto ay mapapalitan ng ibang kulay kapag inilabas ng user ang pinindot na key tulad ng ipinapakita sa ibaba:
< html >
< ulo >
< iskrip src = 'https://code.jquery.com/jquery-3.7.0.js' >< / iskrip >
< iskrip >
$(dokumento).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('kulay', 'forestgreen');
});
});
< / iskrip >
< / ulo >
< katawan >
< div >
Ipasok ang Linuxhint Data: < input id = 'demo' uri = 'text' / >
< / div >
< / katawan >
< / html >
Ang paglalarawan ng code sa itaas ay binanggit sa ibaba:
- Una, i-import ang jQuery sa proyekto sa pamamagitan ng pagpasok ng online CDN nito sa pamamagitan ng pagbisita dito link ng opisyal na dokumentasyon.
- Susunod, lumikha ng isang hindi kilalang function na tatawagin kapag ang ' dokumento ” o na-load ang page. Pinipili ng function na ito ang HTML element na may id ng “demo” at inilakip ang “ susi pataas ()” na pamamaraan kasama nito.
- Ang ' susi pataas ()' na pamamaraan ay humihimok ng callback function na gumagamit ng ' css ()' upang itakda ang kulay ng font ng teksto sa ' forestgreen ”.
- Ngayon, lumikha ng napiling '< input >” elemento sa loob ng “< katawan >” tag at italaga ito ng id ng “ demo ”.
Preview ng webpage pagkatapos makumpleto ang proseso ng compilation:
Ipinapakita ng output ang kulay ng mga pagbabago sa teksto kapag nailabas na ang napiling key.
Halimbawa 2: Pagbabago ng Kulay ng Background sa Dynamically
Sa halimbawang ito, iba't ibang kulay ng background ang itatakda para sa napiling elemento ng HTML sa tuwing aalis ang user sa pinindot na key. Tingnan natin ang code para sa sitwasyong ito:
< ulo >< iskrip src = 'https://code.jquery.com/jquery-3.7.0.js' >< / iskrip >
< iskrip >
hayaan ang backgroundShades = [ 'aquamarine' , 'orangered' , 'cadetblue' , 'forestgreen' ,
'lightgray' , 'sandybrown' , 'magenta' , 'burlywood' ] ;
hayaan si j = 0 ;
$ ( dokumento ) .susi pataas ( function ( kaganapan ) {
$ ( '#hgg' ) .css ( 'kulay ng background' , backgroundShades [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / iskrip >
< / ulo >
< katawan >
< h1 istilo = 'kulay: seagreen' >Linuxhint Artikulo< / h1 >< br >
< div id = 'hgg' istilo = 'padding: 10px' >
< h2 >jQuery keyup Ginamit para Magtakda ng Iba Background sa bawat paglabas ng Key.< / h2 >
< br / >
< / div >
< / katawan >
Paglalarawan ng code sa itaas:
- Sa una, i-import ang jQuery sa iyong proyekto sa pamamagitan ng pagdaragdag ng jQuery CDN sa loob ng '< ulo >” tag.
- Pagkatapos, lumikha ng isang array na pinangalanang ' backgroundShades ” na naglalaman ng walong random na kulay.
- Susunod, ang ' susi pataas ()' na paraan ay nakalakip sa ' dokumento ” at humihiling ito ng anonymous na function ng callback. Pinipili ng function na ito ang HTML element na may id na “ hgg ' at inilalapat ang CSS ' kulay ng background ” ari-arian.
- Ang array ' backgroundShades Ang ” ay ipinasa bilang ang halaga para sa mga katangian ng CSS at ang index ay nakatakda sa “ j ” variable. Ang variable na ito ay dinadagdagan ng isa sa bawat oras at magsisimula muli mula sa ' 0 ” index kapag ang halaga ay umabot sa “ 8 ”. Dahil ang max index sa array ay “ 7 ”.
- Pagkatapos nito, lumikha ng isang napiling ' div 'elemento na may id ng ' hgg ”, ang kulay ng background ng elementong ito ay babaguhin kapag nailabas ang pinindot na key.
Preview ng webpage pagkatapos ng compilation:
Kinukumpirma ng output na ang kulay ng background para sa napiling elemento ng HTML ay nagbabago sa bawat oras na ang pinindot o napiling key ay ilalabas. Iyon ay tungkol sa paggamit ng ' susi pataas ()” paraan.
Konklusyon
Ang jQuery ' susi pataas ()” na paraan ay nagti-trigger ng callback function sa napiling HTML element kapag nailabas na ang pinindot na key. Ang pamamaraang ito ay hindi tumatawag kapag ang key ay pinindot ngunit sa oras ng pag-release o sa key up ang function na ito ay nagsasagawa ng isang callback function. Ipinaliwanag ng blog na ito ang paggamit at paggana ng jQuery keyup() method.