Lomaketta tai kyselyä luotaessa voi olla vaatimus allokoida käyttäjän syöttämä arvo tiettyyn kenttään. Esimerkiksi luottamuksellisten merkintöjen eli salasanan tai koodatun arvon liittäminen niiden hyödyntämiseksi. Tällaisissa tapauksissa piilotetun syöttöelementin arvon asettaminen JavaScriptin avulla auttaa pitämään tiedot turvassa.
Tässä blogissa käsitellään piilotetun syöttökentän arvon määrittämistä JavaScriptin avulla
Kuinka asettaa piilotetun syöttökentän arvo JavaScriptin avulla?
Jos haluat asettaa piilotetun syöttökentän arvon JavaScriptin avulla, käytä alla olevia lähestymistapoja:
Tapa 1: Aseta piiloelementin arvo sisäisen HTML-ominaisuuden kautta
' innerHTML ”-ominaisuus palauttaa elementin HTML-sisällön. Tätä ominaisuutta voidaan käyttää käyttäjän määrittämän arvon asettamiseen ja liittämiseen varattuun piilotettuun syöttökenttään.
Syntaksi:
element.innerHTML = teksti
Yllä olevassa syntaksissa ' elementti ' viittaa elementtiin, joka on liitettävä ' teksti ”arvoa.
Esimerkki
Käydään läpi alla oleva esimerkki:
< syöttö tyyppi = 'piilotettu' id = 'piilotettu elementti' arvo = '' >< käsikirjoitus >
päästää myInput = kehote ( 'Syötä tekstisi' , '' ) ;
jos ( myInput ! = nolla ) {
päästää x = document.getElementById ( 'piilotettu elementti' ) .innerHTML = 'Piilotetun elementin arvo on: ' + myInput;
hälytys ( x )
}
käsikirjoitus >
Yllä olevassa koodilohkossa:
- Luo ensin syöttökenttä, jossa on ilmoitetut attribuutit.
- ' tyyppi ' attribuutti arvolla ' piilotettu ” tarkoittaa, että se on piilotettu kenttä.
- Sen jälkeen ' kehote ” -valintaikkuna ottaa arvon käyttäjältä.
- Tarkista nyt käyttäjän määrittämä arvo, jotta se ei ole ' tyhjä ' käyttämällä ' jos ”ehto.
- Pääset lopuksi piilotettuun syöttökenttään sen ' id ' käyttämällä ' getElementById() ' -menetelmää ja aseta sille käyttäjän määrittämä arvo ' innerHTML ” omaisuutta.
- Näytä lopuksi lisätty arvo hälytyksen kautta.
Lähtö
Kuten havaittiin, käyttäjän syöttämä arvo liitetään piilotettuun syöttökenttään.
Tapa 2: Aseta piiloelementin arvo käyttämällä jQuery-lähestymistapaa
Tässä lähestymistavassa jQueryn ' val() ” -menetelmää käytetään allokoimaan näkyvän syöttötekstikentän arvo piilotettuun syöttökenttään.
Esimerkki
Katsotaanpa seuraava koodi:
< s > Syötä arvo varten piilotettu elementti s >< syöttö id = 'myInput' arvo = '' tyyppi = 'teksti' />< br >
< syöttö id = 'piilotettu elementti' tyyppi = 'piilotettu' arvo = '' />
< br >
< -painiketta id = 'btnShow' > Lähetä -painiketta >
< käsikirjoitus src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > käsikirjoitus >
< käsikirjoitus >
$ ( '#btnNäytä' ) .päällä ( 'klikkaus' , toiminto ( ) {
päästää inputValue = $ ( '#omasyöttö' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( inputValue ) ;
hälytys ( 'Piilotetun elementin arvo on:' + inputValue ) ;
} ) ;
käsikirjoitus >
Yllä olevilla koodiriveillä:
- Sisällytä ensin syöttötekstikenttä, jossa on ilmoitetut attribuutit.
- Samoin varaa toinen piilotettu syöttökenttä, kuten sen ' tyyppi ”-attribuutti.
- Lisätty
- Lisää sen jälkeen jQuery-kirjasto ' src attribuutti kohdassa '