Denne opskrivning vil forklare fremgangsmåderne til at få tekstområdeværdi i JavaScript.
Hvordan får man tekstområdeværdi i JavaScript?
Tekstområdets værdi kan hentes i JavaScript ved hjælp af følgende fremgangsmåder:
- “ getElementById() ” metode.
- “ addEventListener() ” metode.
- “ jQuery ”.
Fremgangsmåde 1: Hent tekstområdeværdi i JavaScript ved hjælp af getElementById()-metoden
Det ' getElementById() ”-metoden får adgang til et element med det angivne ” id ”. Denne metode kan implementeres til at hente input tekstfeltet og returnere den indtastede værdi i det.
Syntaks
dokument. getElementById ( element )
I den givne syntaks:
- “ element ' henviser til ' id ” skal hentes mod det bestemte element.
Eksempel
Lad os se på følgende eksempel:
Lad os anvende følgende trin i nedenstående kode:
< h3 > Få tekstområdeværdi i JavaScript h3 >
Skriv noget : < input type = 'tekst' id = 'txt' pladsholder = 'Indtast tekst...' >
< knap ved klik = 'textareaValue()' > Få værdi knap >
Udfør følgende trin:
- I det første trin skal du angive den angivne overskrift.
- Herefter skal du inkludere inputtekstfeltet med det angivne ' id ' og ' pladsholder 'værdi.
- Opret også en knap med en vedhæftet ' onclick ” hændelse, der omdirigerer til funktionen textareaValue()
Lad os gå videre til JavaScript-delen af koden:
< manuskript >fungere tekstområdeVærdi ( ) {
lade få = dokument. getElementById ( 'txt' ) . værdi
alert ( få )
}
manuskript >
I ovenstående JavaScript-kode:
- Erklære en funktion ved navn ' textareaValue() ”.
- I dens definition skal du få adgang til inputtekstfeltet ved hjælp af dets specificerede id ved hjælp af ' getElementById() ” metode.
- Anvend også ' værdi ” egenskab for at hente den indtastede tekstværdi.
- Vis endelig tekstområdets værdi via ' alert ” dialogboksen.
Produktion
I ovenstående output kan det ses, at den indtastede værdi hentes via advarselsdialogboks.
Fremgangsmåde 2: Hent tekstområdeværdi i JavaScript ved hjælp af addEventListener()-metoden
Det ' addEventListener() '-metoden bruges til at tilknytte en ' begivenhed ” med et element. Denne metode kan bruges til at knytte en hændelse til funktionen, således at tekstområdets værdi hentes ved hvert input side om side på konsollen.
Syntaks
element. addEventListener ( begivenhed , fungere , exec )I ovenstående syntaks:
- “ begivenhed ” peger på begivenhedens navn.
- “ fungere ” angiver den funktion, der skal køre ved udløsning af en hændelse.
- “ exec ” er den valgfri parameter.
Eksempel
Lad os følge nedenstående eksempel trin for trin:
< tekstområde-id = 'txtarea' rækker = '5' cols = '25' pladsholder = 'Indtast tekst...' > tekstområde >
< script type = 'tekst/javascript' >
lade få = dokument. getElementById ( 'txtarea' ) ;
konsol. log ( få . værdi ) ;
få . addEventListener ( 'input' , fungere tekstområdeVærdi ( begivenhed ) {
konsol. log ( begivenhed. mål . værdi ) ;
} ) ;
manuskript >
I ovenstående kodestykke:
- Angiv den angivne etiket. Tildel også ' tekstområde ' element med den angivne værdi af ' id ' og ' pladsholder ” og justere dens dimensioner også.
- I JavaScript-delen af koden skal du få adgang til det angivne tekstområde i det foregående trin og vise det ved hjælp af ' værdi ” ejendom.
- I næste trin skal du vedhæfte en begivenhed ' tekst ' til den hentede ' tekst område ' bruger ' addEventListener() '-metoden og anvende den på funktionen ' textareaValue() ”. Det ' begivenhed ” i sin argumentation videregiver information om den hændelse, der udløses.
- Dette vil resultere i at hver af de indtastede tekstværdier logges side om side.
Produktion
Fra ovenstående output, ' henter ” af hver af de indtastede tekstværdier kan observeres.
Fremgangsmåde 3: Få tekstområdeværdi i JavaScript ved hjælp af jQuery
“ jQuery ” kan anvendes til at få adgang til inputtekstfeltet og udløse dets funktionaliteter, så snart Document Object Model (DOM) er indlæst.
Eksempel
Lad os følge nedenstående eksempel:
Skriv noget : < input type = 'tekst' id = 'txt' pladsholder = 'Indtast tekst...' >
< knap > Få værdi knap >
I ovenstående kodelinjer skal du udføre følgende trin:
- Inkluder jQuery-biblioteket for at anvende dets metoder.
- Angiv ' input ' som tekstfelt med de angivne værdier af ' id ' og ' pladsholder ' som nævnt før.
- Opret også en knap for at få værdien ved et knapklik.
Gå videre til JavaScript-delen af koden:
< manuskript >$ ( dokument ) . parat ( fungere ( ) {
$ ( 'knap' ) . klik ( fungere ( ) {
konsol. log ( $ ( 'input:tekst' ) . val ( ) ) ;
} ) ;
} ) ;
manuskript >
Følg de angivne trin:
- Anvend ' parat() ” metode for at anvende de yderligere metoder på den indlæste DOM.
- Få adgang til den oprettede knap og vedhæft ' klik() ” metode til den, som vil udføre den angivne funktion i dens parameter.
- Click()-metoden vil få adgang til det angivne inputtekstfelt og logge den indtastede tekstværdi på konsollen.
Produktion
Derfor logges typens værdi på konsollen.
Det var alle de forskellige måder at få værdien af tekstområdet på ved hjælp af JavaScript.
Konklusion
Det ' getElementById() 'metoden, ' addEventListener() '-metoden eller ' jQuery ” kan bruges til at få tekstområdeværdi i JavaScript. GetElementById()-metoden kan implementeres for at få adgang til inputtekstfeltet og vise den indtastede tekstområdeværdi via advarsel. Metoden addEventListener() kan bruges til at vedhæfte en ' input ” hændelse, som får tekstværdien ved hvert input side om side. jQuery kan anvendes til at få direkte adgang til knappen og hente den indtastede tekstværdi ved at klikke på knappen på konsollen. Denne vejledning forklarer, hvordan du får tekstområdeværdi i JavaScript.