In dit artikel worden de benaderingen uitgelegd om de waarde van het tekstgebied in JavaScript te krijgen.
Hoe de waarde van het tekstgebied in JavaScript te krijgen?
De waarde van het tekstgebied kan op de volgende manieren in JavaScript worden opgehaald:
- “ getElementById() ” methode.
- “ addEventListener() ” methode.
- “ jQuery ”.
Benadering 1: waarde voor tekstgebied ophalen in JavaScript met behulp van de getElementById()-methode
De ' getElementById() ” methode benadert een element met de gespecificeerde “ ID kaart ”.Deze methode kan worden geïmplementeerd om het invoertekstveld op te halen en de daarin ingevoerde waarde te retourneren.
Syntaxis
document. getElementById ( element )
In de gegeven syntaxis:
- “ element ' verwijst naar de ' ID kaart ” om te worden opgehaald tegen het specifieke element.
Voorbeeld
Laten we eens kijken naar het volgende voorbeeld:
Laten we de volgende stappen toepassen in de onderstaande code:
< h3 > Krijg de waarde van het tekstgebied in javascript h3 >
Typ iets : < invoertype: = 'tekst' ID kaart = 'tekst' tijdelijke aanduiding = 'Tekst invoeren...' >
< knop opklik = 'tekstgebiedWaarde()' > Krijg waarde knop >
Voer de volgende stappen uit:
- Geef in de eerste stap de vermelde kop op.
- Voeg daarna het invoertekstveld toe met de opgegeven ' ID kaart ' en ' tijdelijke aanduiding ' waarde.
- Maak ook een knop met een bijgevoegde ' bij klikken ”gebeurtenis die doorverwijst naar de functie textareaValue()
Laten we verder gaan naar het JavaScript-gedeelte van de code:
< script >functie textareaWaarde ( ) {
laten krijgen = document. getElementById ( 'tekst' ) . waarde
alarm ( krijgen )
}
script >
In de bovenstaande JavaScript-code:
- Declareer een functie met de naam ' tekstgebiedWaarde() ”.
- Open in zijn definitie het invoertekstveld met de opgegeven id met behulp van de ' getElementById() ” methode.
- Pas ook de “ waarde ” eigenschap om de ingevoerde tekstwaarde op te halen.
- Geef ten slotte de waarde van het tekstgebied weer via de knop ' alarm 'dialoogvenster.
Uitgang
In de bovenstaande uitvoer is te zien dat de ingevoerde waarde wordt opgehaald via het waarschuwingsdialoogvenster.
Benadering 2: Get Text Area Value in JavaScript met behulp van de addEventListener()-methode
De ' addEventListener() ” methode wordt gebruikt om een “ evenement ” met een element. Deze methode kan worden gebruikt om een gebeurtenis aan de functie te koppelen zodat de waarde van het tekstgebied wordt opgehaald bij elke invoer naast elkaar op de console.
Syntaxis
element. addEventListener ( evenement , functie , exec )In de bovenstaande syntaxis:
- “ evenement ” wijst naar de naam van het evenement.
- “ functie ” geeft de functie aan die moet worden uitgevoerd na de trigger van een gebeurtenis.
- “ exec ” is de optionele parameter.
Voorbeeld
Laten we het onderstaande voorbeeld stap voor stap volgen:
< tekstgebied id = 'txtarea' rijen = '5' cols = '25' tijdelijke aanduiding = ' Tekst invoeren...' > tekstgebied >
< scripttype = 'tekst/javascript' >
laten krijgen = document. getElementById ( 'txtarea' ) ;
troosten. loggen ( krijgen . waarde ) ;
krijgen . addEventListener ( 'invoer' , functie textareaWaarde ( evenement ) {
troosten. loggen ( evenement. doelwit . waarde ) ;
} ) ;
script >
In het bovenstaande codefragment:
- Geef het vermelde label op. Wijs ook de ' tekstgebied ” element met de gespecificeerde waarde van “ ID kaart ' en ' tijdelijke aanduiding ” en pas ook de afmetingen aan.
- Ga in het JavaScript-gedeelte van de code naar het opgegeven tekstgebied in de vorige stap en geef het weer met de ' waarde ' eigendom.
- Voeg in de volgende stap een evenement toe ' tekst 'naar de gehaalde' tekst gebied ' de ... gebruiken ' addEventListener() ' methode en pas deze toe op de functie ' tekstgebiedWaarde() ”. De ' evenement ” geeft in zijn argument informatie door over de gebeurtenis die wordt geactiveerd.
- Dit zal ertoe leiden dat elk van de ingevoerde tekstwaarden naast elkaar wordt gelogd.
Uitgang
Uit de bovenstaande uitvoer, de ' halen ” van elk van de ingevoerde tekstwaarden kan worden waargenomen.
Benadering 3: Get Text Area Value in JavaScript met behulp van jQuery
“ jQuery ” kan worden toegepast om toegang te krijgen tot het invoertekstveld en de functionaliteit ervan te activeren zodra het Document Object Model (DOM) is geladen.
Voorbeeld
Laten we het onderstaande voorbeeld volgen:
Typ iets : < invoertype: = 'tekst' ID kaart = 'tekst' tijdelijke aanduiding = 'Tekst invoeren...' >
< knop > Krijg waarde knop >
Voer in de bovenstaande coderegels de volgende stappen uit:
- Voeg de jQuery-bibliotheek toe om de methoden toe te passen.
- Specificeer de ' invoer ” als tekstveld met de gespecificeerde waarden van “ ID kaart ' en ' tijdelijke aanduiding 'zoals eerder besproken.
- Maak ook een knop om de waarde te krijgen bij het klikken op de knop.
Ga verder met het JavaScript-gedeelte van de code:
< script >$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
troosten. loggen ( $ ( 'invoer:tekst' ) . val ( ) ) ;
} ) ;
} ) ;
script >
Volg de vermelde stappen:
- Pas de ' klaar() ” methode om de verdere methoden toe te passen op de geladen DOM.
- Open de gemaakte knop en voeg de ' Klik() ” methode toe die de vermelde functie in zijn parameter zal uitvoeren.
- De methode click() heeft toegang tot het opgegeven invoertekstveld en registreert de ingevoerde tekstwaarde op de console.
Uitgang
Daarom wordt de waarde van het type vastgelegd op de console.
Dit waren allemaal verschillende manieren om de waarde van het tekstgebied te krijgen met behulp van JavaScript.
Conclusie
De ' getElementById() ” methode, de “ addEventListener() ” methode of de “ jQuery ” kan worden gebruikt om de waarde van het tekstgebied in JavaScript te krijgen. De methode getElementById() kan worden geïmplementeerd om toegang te krijgen tot het invoertekstveld en de waarde van het ingevoerde tekstgebied weer te geven via een waarschuwing. De methode addEventListener() kan worden gebruikt om een ' invoer ”gebeurtenis die de tekstwaarde bij elke invoer naast elkaar krijgt. De jQuery kan worden toegepast om rechtstreeks toegang te krijgen tot de knop en de ingevoerde tekstwaarde op te halen bij het klikken op de knop op de console. In deze zelfstudie wordt uitgelegd hoe u de waarde van het tekstgebied in JavaScript kunt krijgen.