Habang gumagawa ng isang form o isang palatanungan, maaaring mayroong kinakailangan upang maglaan ng halaga ng input ng user sa isang partikular na field. Halimbawa, ang pagdaragdag ng mga kumpidensyal na entry, ibig sabihin, isang password o isang naka-encode na halaga upang magamit ang mga ito. Sa ganitong mga kaso, ang pagtatakda ng halaga ng isang nakatagong elemento ng input sa pamamagitan ng JavaScript ay tumutulong sa pagpapanatiling ligtas at secure ng data.
Tatalakayin ng blog na ito ang pamamaraan upang itakda ang halaga ng isang nakatagong input field sa pamamagitan ng JavaScript
Paano Itakda ang Halaga ng isang Nakatagong Field ng Input sa pamamagitan ng JavaScript?
Upang itakda ang halaga ng nakatagong field ng input sa pamamagitan ng JavaScript, ilapat ang mga pamamaraang nakasaad sa ibaba:
Paraan 1: Itakda ang Halaga ng Nakatagong Elemento sa pamamagitan ng innerHTML Property
Ang ' panloobHTML ” ibinabalik ng property ang HTML na content ng elemento. Maaaring gamitin ang property na ito para itakda at idugtong ang value na tinukoy ng user sa inilaan na nakatagong input field.
Syntax:
element.innerHTML = text
Sa syntax sa itaas, ' elemento Ang ” ay tumutukoy sa elementong kailangang dugtungan ng “ text ” halaga.
Halimbawa
Dumaan tayo sa nakasaad sa ibabang halimbawa:
< input uri = 'nakatago' id = 'hiddenElement' halaga = '' >< iskrip >
hayaan myInput = prompt ( 'Pakilagay ang iyong Teksto' , '' ) ;
kung ( myInput ! = null ) {
hayaan x = document.getElementById ( 'hiddenElement' ) .innerHTML = 'Ang halaga ng nakatagong elemento ay: ' + myInput;
alerto ( x )
}
iskrip >
Sa itaas na bloke ng code:
- Una, lumikha ng input field na mayroong nakasaad na mga katangian.
- Ang ' uri ' attribute na may halaga ' nakatago ” ay nagpapahiwatig na ito ay isang nakatagong larangan.
- Pagkatapos nito, ang ' prompt ” ang dialog box ay kumukuha ng halaga mula sa user.
- Ngayon, maglapat ng tseke sa halagang tinukoy ng gumagamit upang hindi ito ' wala ' gamit ang ' kung ' kundisyon.
- Panghuli, i-access ang nakatagong input field sa pamamagitan ng ' id ' gamit ang ' getElementById() ” na paraan at itakda ang halaga na tinukoy ng gumagamit dito sa pamamagitan ng “ panloobHTML ” ari-arian.
- Panghuli, ipakita ang nakadugtong na halaga sa pamamagitan ng isang alerto.
Output
Gaya ng naobserbahan, ang value ng user-input ay idinagdag sa hidden input field.
Paraan 2: Itakda ang Halaga ng Nakatagong Elemento Gamit ang jQuery Approach
Sa pamamaraang ito, ang jQuery's ' val() Gagamitin ang paraan upang ilaan ang halaga ng nakikitang input text field sa hidden input field.
Halimbawa
Tingnan natin ang sumusunod na code:
< p > Ipasok ang halaga para sa nakatagong elemento p >< input id = 'myInput' halaga = '' uri = 'text' />< br >
< input id = 'hiddenElement' uri = 'nakatago' halaga = '' />
< br >
< pindutan id = 'btnShow' > Ipasa pindutan >
< iskrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > iskrip >
< iskrip >
$ ( '#btnShow' ) .on ( 'click' , function ( ) {
hayaan inputValue = $ ( '#myInput' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( inputValue ) ;
alerto ( 'Ang halaga ng nakatagong Elemento ay :' + inputValue ) ;
} ) ;
iskrip >
Sa itaas na mga linya ng code:
- Una, magsama ng input text field na mayroong mga nakasaad na attribute.
- Gayundin, maglaan ng isa pang nakatagong patlang ng pag-input, tulad ng nakikita mula sa ' uri ” katangian.
- Idinagdag ang tag na
- Pagkatapos nito, isama ang jQuery library sa tulong ng “ src 'attribute sa'