Kuidas saada JavaScriptis tekstiala väärtust?

Responsiivsete veebilehtede või saitide kujundamise käigus on vaja sisestatud andmete kasutajalt teada anda, et tagada õiged sisestatud andmed. Näiteks sisestatud kirjade ja paroolide kinnitamine. Teisel juhul vea või hoiatuse logimine valitud suvandi peale, mis võib kaasa tuua tõsiseid tagajärgi, nt viiruse jne. Sellistel juhtudel on JavaScriptis tekstiala väärtuse hankimine andmete privaatsuse säilitamisel väga kasulik.

See kirjutis selgitab lähenemisviise tekstiala väärtuse saamiseks JavaScriptis.

Kuidas saada JavaScriptis tekstiala väärtust?

Tekstiala väärtust saab JavaScriptis tuua järgmiste lähenemisviiside abil:

“ getElementById() ” meetod.
“ addEventListener() ” meetod.
“ jQuery ”.

1. lähenemisviis: hankige JavaScripti tekstiala väärtus, kasutades meetodit getElementById().

' getElementById() ' meetod pääseb juurde elemendile, millel on määratud ' id .Seda meetodit saab rakendada sisendteksti välja toomiseks ja sinna sisestatud väärtuse tagastamiseks.

Süntaks

dokument. getElementById ( element )

Antud süntaksis:

“ element ' viitab ' id ”, mida konkreetse elemendi vastu tuua.

Näide
Vaatame järgmist näidet:

Rakendame allolevas koodis järgmisi samme:

< h3 > Hankige tekstiala väärtus sisse JavaScript h3 >
Sisestage midagi : < sisendi tüüp = 'tekst' id = 'txt' kohatäide = 'Sisesta tekst...' >
< nupp onclick = 'textareaValue()' > Hankige väärtust nuppu >

Tehke järgmised sammud.

Esimeses etapis määrake märgitud pealkiri.
Pärast seda lisage sisestusteksti väli määratud ' id ” ja „ kohatäide ” väärtus.
Samuti looge nupp, millele on lisatud ' onclick ” sündmus, mis suunab ümber funktsioonile textareaValue()

Liigume edasi koodi JavaScripti osa juurde:

< stsenaarium >
funktsiooni textareaValue ( ) {
lase saada = dokument. getElementById ( 'txt' ) . väärtus
hoiatus ( saada )
}
stsenaarium >

Ülaltoodud JavaScripti koodis:

Deklareerige funktsioon nimega ' textareaValue() ”.
Selle määratluses pääsete sisendtekstiväljale juurde selle määratud ID abil, kasutades ' getElementById() ” meetod.
Rakendage ka ' väärtus ” atribuuti, et tuua sisestatud tekstiväärtus.
Lõpuks kuvage tekstiala väärtus ' hoiatus ” dialoogiaken.

Väljund

Ülaltoodud väljundis on näha, et sisestatud väärtus tuuakse hoiatuste dialoogiboksi kaudu.

2. lähenemisviis: hankige JavaScriptis tekstiala väärtus, kasutades meetodit addEventListener().

' addEventListener() 'meetodit kasutatakse '' seostamiseks sündmus ” elemendiga. Seda meetodit saab kasutada sündmuse lisamiseks funktsioonile nii, et tekstiala väärtus tuuakse konsooli igas sisendis kõrvuti.

Süntaks

element. addEventListener ( sündmus , funktsiooni , täitja )

Ülaltoodud süntaksis:

“ sündmus ” osutab sündmuse nimele.
“ funktsiooni ” näitab funktsiooni, mis käivitatakse sündmuse käivitamisel.
“ täitja ” on valikuline parameeter.

Näide
Järgime samm-sammult alltoodud näidet:

< silt jaoks = 'txt' > Sisestage midagi : silt >< br >< br >
< tekstiala id = 'txtarea' read = '5' veerg = '25' kohatäide = 'Sisesta tekst...' > tekstiala >
< skripti tüüp = 'text/javascript' >
lase saada = dokument. getElementById ( 'txtarea' ) ;
konsool. logi ( saada . väärtus ) ;
saada . addEventListener ( 'sisend' , funktsiooni textareaValue ( sündmus ) {
konsool. logi ( sündmus. sihtmärk . väärtus ) ;
} ) ;
stsenaarium >

Ülaltoodud koodilõigul:

Täpsustage märgitud silt. Samuti määrake ' tekstiala ' element määratud väärtusega ' id ” ja „ kohatäide ” ja kohandage ka selle mõõtmeid.
Koodi JavaScripti osas avage eelmises etapis määratud tekstiala ja kuvage see, kasutades ' väärtus ” vara.
Järgmises etapis lisage sündmus ' tekst 'toodud' tekstiala ' kasutades ' addEventListener() ' meetodit ja rakendage seda funktsioonile ' textareaValue() ”. ' sündmus ” edastab oma argumendis teavet käivitatava sündmuse kohta.
Selle tulemusel logitakse kõik sisestatud tekstiväärtused kõrvuti.

Väljund

Ülaltoodud väljundist on ' toomine ” saab jälgida iga sisestatud tekstiväärtust.

3. lähenemisviis: hankige tekstiala väärtus JavaScriptis jQuery abil

“ jQuery ” saab rakendada sisendtekstiväljale juurdepääsuks ja selle funktsioonide käivitamiseks kohe, kui dokumendiobjekti mudel (DOM) on laaditud.

Näide
Järgime alltoodud näidet:

< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' > stsenaarium >
Sisestage midagi : < sisendi tüüp = 'tekst' id = 'txt' kohatäide = 'Sisesta tekst...' >
< nuppu > Hankige väärtust nuppu >

Tehke ülaltoodud koodiridadel järgmised toimingud.

Kaasake jQuery teek selle meetodite rakendamiseks.
Määrake ' sisend ' tekstiväljana määratud väärtustega ' id ” ja „ kohatäide ”, nagu eelnevalt juttu oli.
Samuti looge nupp, et saada väärtus nupu klõpsamisel.

Liikuge edasi koodi JavaScripti osa juurde:

< stsenaarium >
$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
konsool. logi ( $ ( 'sisend:tekst' ) . val ( ) ) ;
} ) ;
} ) ;
stsenaarium >

Järgige kirjeldatud samme:

Rakenda ' valmis () ” meetodit, et rakendada täiendavaid meetodeid laaditud DOM-ile.
Juurdepääs loodud nupule ja lisage ' kliki () ” meetod, mis täidab selle parameetris märgitud funktsiooni.
Meetod click() pääseb määratud sisestustekstiväljale ja logib sisestatud teksti väärtuse konsooli.

Väljund

Seega logitakse tüübi väärtus konsoolile.

Need olid kõik erinevad viisid tekstiala väärtuse saamiseks JavaScripti abil.

Järeldus

' getElementById() ' meetod, ' addEventListener() meetod või jQuery ” saab kasutada tekstiala väärtuse saamiseks JavaScriptis. Meetodi getElementById() saab rakendada sisendtekstiväljale juurdepääsuks ja sisestatud tekstiala väärtuse kuvamiseks hoiatuse kaudu. Meetodit addEventListener() saab kasutada ' sisend ” sündmus, mis saab iga sisendi teksti väärtuse kõrvuti. JQueryt saab rakendada nupule otse juurdepääsuks ja sisestatud tekstiväärtuse toomiseks konsoolil nupul klõpsates. See õpetus selgitab, kuidas saada JavaScriptis tekstiala väärtust.

Kuidas saada JavaScriptis tekstiala väärtust?