Šis raksts izskaidros metodes teksta apgabala vērtības iegūšanai JavaScript.
Kā iegūt teksta apgabala vērtību JavaScript?
Teksta apgabala vērtību var iegūt JavaScript, izmantojot šādas pieejas:
- ' getElementById() ” metode.
- ' addEventListener() ” metode.
- ' jQuery ”.
1. pieeja: iegūstiet teksta apgabala vērtību JavaScript, izmantojot metodi getElementById()
' getElementById() metode piekļūst elementam ar norādīto id . Šo metodi var ieviest, lai izgūtu ievades teksta lauku un atgrieztu tajā ievadīto vērtību.
Sintakse
dokumentu. getElementById ( elements )
Dotajā sintaksē:
- ' elements ” attiecas uz „ id ”, kas jāiegūst pret konkrēto elementu.
Piemērs
Apskatīsim šādu piemēru:
Tālāk norādītajā kodā piemērosim tālāk norādītās darbības.
< h3 > Iegūstiet teksta apgabala vērtību iekšā JavaScript h3 >
Ierakstiet kaut ko : < ievades veids = 'teksts' id = 'txt' vietturis = 'Ievadiet tekstu...' >
< pogu onclick = 'textareaValue()' > Iegūstiet vērtību pogu >
Veiciet tālāk norādītās darbības.
- Pirmajā solī norādiet norādīto virsrakstu.
- Pēc tam iekļaujiet ievades teksta lauku ar norādīto “ id ' un ' vietturis ” vērtību.
- Izveidojiet arī pogu ar pievienotu ' onclick ” notikuma novirzīšana uz funkciju textareaValue()
Pāriesim uz koda JavaScript daļu:
< skripts >funkciju textareaValue ( ) {
ļaut gūt = dokumentu. getElementById ( 'txt' ) . vērtību
brīdinājums ( gūt )
}
skripts >
Iepriekš minētajā JavaScript kodā:
- Deklarējiet funkciju ar nosaukumu ' textareaValue() ”.
- Tās definīcijā piekļūstiet ievades teksta laukam pēc tā norādītā ID, izmantojot “ getElementById() ” metode.
- Tāpat izmantojiet ' vērtību ” rekvizītu, lai izgūtu ievadīto teksta vērtību.
- Visbeidzot parādiet teksta apgabala vērtību, izmantojot ' brīdinājums ” dialoglodziņš.
Izvade
Iepriekš minētajā izvadē var novērot, ka ievadītā vērtība tiek iegūta, izmantojot brīdinājuma dialoglodziņu.
2. pieeja: iegūstiet teksta apgabala vērtību JavaScript, izmantojot metodi addEventListener().
' addEventListener() metode tiek izmantota, lai saistītu notikumu ” ar elementu. Šo metodi var izmantot, lai funkcijai pievienotu notikumu tā, lai teksta apgabala vērtība tiktu iegūta katrai konsoles ievadei blakus.
Sintakse
elements. addEventListener ( notikumu , funkciju , izpild )Iepriekš minētajā sintaksē:
- ' notikumu ” norāda uz notikuma nosaukumu.
- ' funkciju ” norāda funkciju, kas jāpalaiž pēc notikuma aktivizētāja.
- ' izpild ” ir izvēles parametrs.
Piemērs
Soli pa solim sekosim tālāk sniegtajam piemēram:
< teksta apgabala ID = 'txtarea' rindas = '5' cols = '25' vietturis = 'Ievadiet tekstu...' > teksta apgabals >
< skripta veids = 'teksts/javascript' >
ļaut gūt = dokumentu. getElementById ( 'txtarea' ) ;
konsole. žurnāls ( gūt . vērtību ) ;
gūt . addEventListener ( 'ievade' , funkciju textareaValue ( notikumu ) {
konsole. žurnāls ( notikumu. mērķis . vērtību ) ;
} ) ;
skripts >
Iepriekš minētajā koda fragmentā:
- Norādiet norādīto etiķeti. Tāpat piešķiriet ' teksta apgabals ' elements ar norādīto vērtību ' id ' un ' vietturis ” un pielāgojiet arī tā izmērus.
- Koda JavaScript daļā piekļūstiet iepriekšējā darbībā norādītajam teksta apgabalam un parādiet to, izmantojot ' vērtību ” īpašums.
- Nākamajā darbībā pievienojiet notikumu ' tekstu 'uz atnestajiem' teksta apgabals ' izmantojot ' addEventListener() ' metodi un izmantojiet to funkcijai ' textareaValue() ”. ' notikumu ” savā argumentā nodod informāciju par notikumu, kas tiek aktivizēts.
- Tā rezultātā katra ievadītā teksta vērtība tiks reģistrēta blakus.
Izvade
No iepriekš minētās izvades “ atnešana ” var novērot katru no ievadītajām teksta vērtībām.
3. pieeja: iegūstiet teksta apgabala vērtību JavaScript, izmantojot jQuery
' jQuery ” var lietot, lai piekļūtu ievades teksta laukam un aktivizētu tā funkcijas, tiklīdz tiek ielādēts dokumenta objekta modelis (DOM).
Piemērs
Sekosim tālāk sniegtajam piemēram:
Ierakstiet kaut ko : < ievades veids = 'teksts' id = 'txt' vietturis = 'Ievadiet tekstu...' >
< pogu > Iegūstiet vērtību pogu >
Iepriekš minētajās koda rindās veiciet šādas darbības:
- Iekļaujiet jQuery bibliotēku, lai izmantotu tās metodes.
- Norādiet ' ievade ' kā teksta lauks ar norādītajām vērtībām ' id ' un ' vietturis ”, kā jau tika apspriests iepriekš.
- Izveidojiet arī pogu, lai iegūtu vērtību, noklikšķinot uz pogas.
Pārejiet uz koda JavaScript daļu:
< skripts >$ ( dokumentu ) . gatavs ( funkciju ( ) {
$ ( 'poga' ) . klikšķis ( funkciju ( ) {
konsole. žurnāls ( $ ( 'ievade:teksts' ) . val ( ) ) ;
} ) ;
} ) ;
skripts >
Izpildiet norādītās darbības:
- Pielietojiet ' gatavs () ” metodi, lai ielādētajā DOM izmantotu turpmākās metodes.
- Piekļūstiet izveidotajai pogai un pievienojiet ' klikšķis() ” metodi, kas izpildīs tā parametrā norādīto funkciju.
- Click() metode piekļūs norādītajam ievades teksta laukam un reģistrēs ievadīto teksta vērtību konsolē.
Izvade
Tādējādi tipa vērtība tiek reģistrēta konsolē.
Tie bija dažādi veidi, kā iegūt teksta apgabala vērtību, izmantojot JavaScript.
Secinājums
' getElementById() ' metode, ' addEventListener() ' metode vai ' jQuery ” var izmantot, lai iegūtu teksta apgabala vērtību JavaScript. Metodi getElementById() var ieviest, lai piekļūtu ievades teksta laukam un parādītu ievadīto teksta apgabala vērtību, izmantojot brīdinājumu. Metodi addEventListener() var izmantot, lai pievienotu “ ievade ” notikumu, kas katrai ievadei blakus iegūs teksta vērtību. JQuery var lietot, lai tieši piekļūtu pogai un izgūtu ievadīto teksta vērtību, noklikšķinot uz pogas konsolē. Šajā apmācībā ir paskaidrots, kā iegūt teksta apgabala vērtību JavaScript.