Denne oppskriften vil forklare tilnærmingene for å få tekstområdeverdi i JavaScript.
Hvordan få tekstområdeverdi i JavaScript?
Tekstområdeverdien kan hentes i JavaScript ved å bruke følgende tilnærminger:
- ' getElementById() 'metoden.
- ' addEventListener() 'metoden.
- ' jQuery '.
Tilnærming 1: Få tekstområdeverdi i JavaScript ved å bruke getElementById()-metoden
« getElementById() '-metoden får tilgang til et element med den spesifiserte ' id ”.Denne metoden kan implementeres for å hente inn tekstfeltet og returnere den angitte verdien i det.
Syntaks
dokument. getElementById ( element )
I den gitte syntaksen:
- ' element ' refererer til ' id ' som skal hentes mot det bestemte elementet.
Eksempel
La oss ta en titt på følgende eksempel:
La oss bruke følgende trinn i koden nedenfor:
< h3 > Få tekstområdeverdi i JavaScript h3 >
Skriv noe : < inndatatype = 'tekst' id = 'tekst' plassholder = 'Skriv inn tekst...' >
< knappen ved å klikke = 'textareaValue()' > Få verdi knapp >
Utfør følgende trinn:
- I det første trinnet, spesifiser den angitte overskriften.
- Deretter inkluderer du inntastingstekstfeltet med den spesifiserte ' id ' og ' plassholder 'verdi.
- Lag også en knapp med en vedlagt ' ved trykk ” hendelse som omdirigerer til funksjonen textareaValue()
La oss gå videre til JavaScript-delen av koden:
< manus >funksjon tekstområdeverdi ( ) {
la få = dokument. getElementById ( 'tekst' ) . verdi
varsling ( få )
}
manus >
I JavaScript-koden ovenfor:
- Erklær en funksjon kalt ' textareaValue() '.
- I sin definisjon får du tilgang til tekstfeltet ved hjelp av den angitte id-en ved å bruke ' getElementById() 'metoden.
- Bruk også ' verdi ” egenskap for å hente den angitte tekstverdien.
- Til slutt, vis tekstområdeverdien via ' varsling ' dialogboksen.
Produksjon
I utgangen ovenfor kan det observeres at den angitte verdien hentes via varseldialogboksen.
Tilnærming 2: Få tekstområdeverdi i JavaScript ved å bruke addEventListener()-metoden
« addEventListener() '-metoden brukes til å knytte en ' begivenhet ” med et element. Denne metoden kan brukes til å knytte en hendelse til funksjonen slik at tekstområdeverdien hentes ved hver inngang side ved side på konsollen.
Syntaks
element. addEventListener ( begivenhet , funksjon , exec )I syntaksen ovenfor:
- ' begivenhet ” peker på hendelsesnavnet.
- ' funksjon ” indikerer funksjonen som skal kjøres når en hendelse utløses.
- ' exec ” er den valgfrie parameteren.
Eksempel
La oss følge eksemplet nedenfor trinn for trinn:
< tekstområde-ID = 'txtarea' rader = '5' cols = '25' plassholder = 'Skriv inn tekst...' > tekstområde >
< skripttype = 'tekst/javascript' >
la få = dokument. getElementById ( 'txtarea' ) ;
konsoll. Logg ( få . verdi ) ;
få . addEventListener ( 'inngang' , funksjon tekstområdeverdi ( begivenhet ) {
konsoll. Logg ( begivenhet. mål . verdi ) ;
} ) ;
manus >
I kodebiten ovenfor:
- Angi den angitte etiketten. Tildel også ' tekstområde ' element med den angitte verdien av ' id ' og ' plassholder ” og justere dimensjonene også.
- I JavaScript-delen av koden, få tilgang til det angitte tekstområdet i forrige trinn og vis det ved å bruke ' verdi ' eiendom.
- I neste trinn legger du ved en hendelse ' tekst ' til den hentede ' tekstområdet ' bruker ' addEventListener() '-metoden og bruk den på funksjonen ' textareaValue() '. « begivenhet ” i argumentasjonen sender informasjon om hendelsen som utløses.
- Dette vil resultere i logging av hver av de angitte tekstverdiene side ved side.
Produksjon
Fra utgangen ovenfor, ' henter ” av hver av de angitte tekstverdiene kan observeres.
Tilnærming 3: Få tekstområdeverdi i JavaScript ved å bruke jQuery
' jQuery ” kan brukes for å få tilgang til tekstfeltet og utløse dets funksjoner så snart Document Object Model (DOM) er lastet inn.
Eksempel
La oss følge eksemplet nedenfor:
Skriv noe : < inndatatype = 'tekst' id = 'tekst' plassholder = 'Skriv inn tekst...' >
< knapp > Få verdi knapp >
Utfør følgende trinn i kodelinjene ovenfor:
- Inkluder jQuery-biblioteket for å bruke metodene.
- Spesifiser ' input ' som tekstfelt med de angitte verdiene for ' id ' og ' plassholder ' som diskutert før.
- Lag også en knapp for å få verdien ved å klikke på knappen.
Gå videre til JavaScript-delen av koden:
< manus >$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
konsoll. Logg ( $ ( 'input:tekst' ) . val ( ) ) ;
} ) ;
} ) ;
manus >
Følg de angitte trinnene:
- Bruk ' klar() ”-metoden for å bruke de ytterligere metodene på den innlastede DOM.
- Få tilgang til den opprettede knappen og legg ved ' klikk() ” metode til den som vil utføre den angitte funksjonen i parameteren.
- Click()-metoden vil få tilgang til det angitte tekstfeltet og logge den angitte tekstverdien på konsollen.
Produksjon
Derfor logges typens verdi på konsollen.
Dette var alle de forskjellige måtene å få verdien av tekstområdet ved hjelp av JavaScript.
Konklusjon
« getElementById() 'metoden, ' addEventListener() '-metoden eller ' jQuery ' kan brukes til å få tekstområdeverdi i JavaScript. GetElementById()-metoden kan implementeres for å få tilgang til inndatatekstfeltet og vise den angitte tekstområdeverdien via varsel. Metoden addEventListener() kan brukes til å legge ved en ' input ”-hendelse som vil få tekstverdien ved hver input side ved side. jQuery kan brukes for å få tilgang til knappen direkte og hente den angitte tekstverdien ved å klikke på knappen på konsollen. Denne opplæringen forklarer hvordan du får tekstområdeverdi i JavaScript.