Ten artykuł wyjaśni sposoby uzyskiwania wartości obszaru tekstowego w JavaScript.
Jak uzyskać wartość obszaru tekstowego w JavaScript?
Wartość obszaru tekstowego można pobrać w JavaScript przy użyciu następujących metod:
- “ getElementById() ' metoda.
- “ addEventListener() ' metoda.
- “ jQuery ”.
Podejście 1: Pobierz wartość obszaru tekstowego w JavaScript za pomocą metody getElementById().
„ getElementById() ” uzyskuje dostęp do elementu z określonym „ ID ”.Ta metoda może zostać zaimplementowana w celu pobrania wejściowego pola tekstowego i zwrócenia w nim wprowadzonej wartości.
Składnia
dokument. getElementById ( element )
W podanej składni:
- “ element ' odnosi się do ' ID ”, które mają zostać pobrane z określonego elementu.
Przykład
Spójrzmy na następujący przykład:
Zastosujmy następujące kroki w poniższym kodzie:
< h3 > Uzyskaj wartość obszaru tekstowego w JavaScript h3 >
Napisz coś : < typ wejścia = 'tekst' ID = 'tekst' symbol zastępczy = 'Wprowadź tekst...' >
< przycisk po kliknięciu = 'textareaValue()' > Uzyskaj wartość przycisk >
Wykonaj następujące czynności:
- W pierwszym kroku określ podany nagłówek.
- Następnie dołącz pole tekstu wejściowego z określonym „ ID ' oraz ' symbol zastępczy ' wartość.
- Utwórz również przycisk z dołączonym „ na kliknięcie ” zdarzenie przekierowujące do funkcji textareaValue()
Przejdźmy do części kodu JavaScript:
< scenariusz >funkcjonować wartość pola tekstowego ( ) {
wynajmować Dostawać = dokument. getElementById ( 'tekst' ) . wartość
alarm ( Dostawać )
}
scenariusz >
W powyższym kodzie JavaScript:
- Zadeklaruj funkcję o nazwie „ textareaValue() ”.
- W jego definicji uzyskaj dostęp do wejściowego pola tekstowego za pomocą określonego identyfikatora, używając „ getElementById() ' metoda.
- Zastosuj również „ wartość ” w celu pobrania wprowadzonej wartości tekstowej.
- Na koniec wyświetl wartość obszaru tekstowego za pomocą „ alarm okno dialogowe.
Wyjście
Na powyższym wyjściu można zauważyć, że wprowadzona wartość jest pobierana za pośrednictwem okna dialogowego alertu.
Podejście 2: Pobierz wartość obszaru tekstowego w JavaScript za pomocą metody addEventListener().
„ addEventListener() ” służy do powiązania „ wydarzenie ” z elementem. Tej metody można użyć do dołączenia zdarzenia do funkcji w taki sposób, że wartość obszaru tekstowego jest pobierana przy każdym wejściu obok siebie na konsoli.
Składnia
element. addEventListener ( wydarzenie , funkcjonować , egzekutor )W powyższej składni:
- “ wydarzenie ” wskazuje na nazwę wydarzenia.
- “ funkcjonować ” oznacza funkcję uruchamianą po wyzwoleniu zdarzenia.
- “ egzekutor ” jest parametrem opcjonalnym.
Przykład
Prześledźmy krok po kroku poniższy przykład:
< identyfikator pola tekstowego = 'txtarea' wydziwianie = „5” kol = „25” symbol zastępczy = ' Wprowadź tekst...' > pole tekstowe >
< typ skryptu = „tekst/javascript” >
wynajmować Dostawać = dokument. getElementById ( 'txtarea' ) ;
konsola. dziennik ( Dostawać . wartość ) ;
Dostawać . addEventListener ( 'Wejście' , funkcjonować wartość pola tekstowego ( wydarzenie ) {
konsola. dziennik ( wydarzenie. cel . wartość ) ;
} ) ;
scenariusz >
W powyższym fragmencie kodu:
- Określ podaną etykietę. Przydziel także „ pole tekstowe ” element o określonej wartości „ ID ' oraz ' symbol zastępczy ” i dostosuj również jego wymiary.
- W części kodu JavaScript uzyskaj dostęp do określonego obszaru tekstowego w poprzednim kroku i wyświetl go za pomocą „ wartość ' własność.
- W następnym kroku dołącz wydarzenie „ tekst ” do pobranego ” obszar tekstowy ' używając ' addEventListener() ” i zastosować ją do funkcji „ textareaValue() ”. „ wydarzenie ” w swoim argumencie przekazuje informację o wywołanym zdarzeniu.
- Spowoduje to zapisanie obok siebie każdej z wprowadzonych wartości tekstowych.
Wyjście
Z powyższego wyniku „ ujmujący ” każdej z wprowadzonych wartości tekstowych można zaobserwować.
Podejście 3: Uzyskaj wartość obszaru tekstowego w JavaScript za pomocą jQuery
“ jQuery ” można zastosować, aby uzyskać dostęp do wejściowego pola tekstowego i uruchomić jego funkcje, gdy tylko obiektowy model dokumentu (DOM) zostanie załadowany.
Przykład
Prześledźmy poniższy przykład:
Napisz coś : < typ wejścia = 'tekst' ID = 'tekst' symbol zastępczy = 'Wprowadź tekst...' >
< przycisk > Uzyskaj wartość przycisk >
W powyższych liniach kodu wykonaj następujące kroki:
- Dołącz bibliotekę jQuery, aby zastosować jej metody.
- Określić ' Wejście ” jako pole tekstowe z określonymi wartościami „ ID ' oraz ' symbol zastępczy ”, jak omówiono wcześniej.
- Utwórz również przycisk, aby uzyskać wartość po kliknięciu przycisku.
Przejdź do części kodu JavaScript:
< scenariusz >$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
konsola. dziennik ( $ ( 'Wprowadź tekst' ) . wartość ( ) ) ;
} ) ;
} ) ;
scenariusz >
Wykonaj podane kroki:
- Aplikować ' gotowy() ” w celu zastosowania dalszych metod na załadowanym DOM.
- Uzyskaj dostęp do utworzonego przycisku i dołącz „ Kliknij() ” do niej, która wykona określoną funkcję w swoim parametrze.
- Metoda click() uzyska dostęp do określonego wejściowego pola tekstowego i zarejestruje wprowadzoną wartość tekstową w konsoli.
Wyjście
W związku z tym wartość typu jest rejestrowana w konsoli.
Były to różne sposoby uzyskiwania wartości obszaru tekstowego za pomocą JavaScript.
Wniosek
„ getElementById() „metoda”, „ addEventListener() ” metoda lub „ jQuery ” można wykorzystać do uzyskania wartości obszaru tekstowego w JavaScript. Można zaimplementować metodę getElementById() w celu uzyskania dostępu do wejściowego pola tekstowego i wyświetlenia wprowadzonej wartości obszaru tekstowego za pomocą alertu. Metoda addEventListener() może być wykorzystana do dołączenia „ Wejście ” zdarzenie, które otrzyma wartość tekstową przy każdym wejściu obok siebie. JQuery można zastosować, aby uzyskać bezpośredni dostęp do przycisku i pobrać wprowadzoną wartość tekstową po kliknięciu przycisku na konsoli. W tym samouczku wyjaśniono, jak uzyskać wartość obszaru tekstowego w JavaScript.