Tento zápis vysvětlí přístupy k získání hodnoty textové oblasti v JavaScriptu.
Jak získat hodnotu textové oblasti v JavaScriptu?
Hodnotu textové oblasti lze v JavaScriptu načíst pomocí následujících přístupů:
- “ getElementById() “ metoda.
- “ addEventListener() “ metoda.
- “ jQuery “.
Přístup 1: Získání hodnoty textové oblasti v JavaScriptu pomocí metody getElementById().
' getElementById() “ metoda přistupuje k prvku se zadaným “ id “Tuto metodu lze implementovat k načtení vstupního textového pole a vrácení zadané hodnoty v něm.
Syntax
dokument. getElementById ( živel )
V dané syntaxi:
- “ živel ' Odkazuje na ' id “, který má být načten proti konkrétnímu prvku.
Příklad
Podívejme se na následující příklad:
Aplikujme následující kroky v níže uvedeném kódu:
< h3 > Získejte hodnotu textové oblasti v JavaScript h3 >
Napiš něco : < Typ vstupu = 'text' id = 'txt' zástupný symbol = 'Zadejte text...' >
< tlačítko onclick = 'textareaValue()' > Získejte hodnotu knoflík >
Proveďte následující kroky:
- V prvním kroku určete uvedený nadpis.
- Poté zahrňte vstupní textové pole se zadaným „ id ' a ' zástupný symbol “hodnota.
- Vytvořte také tlačítko s připojeným „ při kliknutí ” přesměrování události na funkci textareaValue()
Pojďme vpřed k JavaScriptové části kódu:
< skript >funkce textareaValue ( ) {
nechat dostat = dokument. getElementById ( 'txt' ) . hodnota
upozornění ( dostat )
}
skript >
Ve výše uvedeném kódu JavaScript:
- Deklarujte funkci s názvem „ textareaValue() “.
- V jeho definici přistupujte k vstupnímu textovému poli pomocí jeho zadaného id pomocí „ getElementById() “ metoda.
- Aplikujte také „ hodnota ” za účelem získání zadané textové hodnoty.
- Nakonec zobrazte hodnotu textové oblasti pomocí „ upozornění “ dialogové okno.
Výstup
Ve výše uvedeném výstupu lze pozorovat, že zadaná hodnota je načtena pomocí dialogového okna výstrahy.
Přístup 2: Získání hodnoty textové oblasti v JavaScriptu pomocí metody addEventListener().
' addEventListener() “ metoda se používá k přidružení “ událost “ s prvkem. Tuto metodu lze použít k připojení události k funkci tak, že hodnota textové oblasti je načtena při každém vstupu vedle sebe na konzole.
Syntax
živel. addEventListener ( událost , funkce , exec )Ve výše uvedené syntaxi:
- “ událost “ ukazuje na název události.
- “ funkce ” označuje funkci, která se má spustit při spuštění události.
- “ exec ” je volitelný parametr.
Příklad
Podívejme se krok za krokem podle níže uvedeného příkladu:
< id textové oblasti = 'txtarea' řádky = '5' sloupce = '25' zástupný symbol = 'Zadejte text...' > textarea >
< typ skriptu = 'text/javascript' >
nechat dostat = dokument. getElementById ( 'txtarea' ) ;
řídicí panel. log ( dostat . hodnota ) ;
dostat . addEventListener ( 'vstup' , funkce textareaValue ( událost ) {
řídicí panel. log ( událost. cílová . hodnota ) ;
} ) ;
skript >
Ve výše uvedeném fragmentu kódu:
- Uveďte uvedený štítek. Také přidělte „ textarea ” prvek se zadanou hodnotou “ id ' a ' zástupný symbol “ a upravte také jeho rozměry.
- V JavaScriptové části kódu přistupte k zadané textové oblasti v předchozím kroku a zobrazte ji pomocí „ hodnota ' vlastnictví.
- V dalším kroku připojte událost „ text “k vynesenému” textová oblast ' za použití ' addEventListener() “ metodu a aplikujte ji na funkci “ textareaValue() “. ' událost ” ve svém argumentu předává informaci o události, která je spuštěna.
- Výsledkem bude protokolování každé ze zadaných textových hodnot vedle sebe.
Výstup
Z výše uvedeného výstupu je „ aportování ” každé ze zadaných textových hodnot.
Přístup 3: Získejte hodnotu oblasti textu v JavaScriptu pomocí jQuery
“ jQuery ” lze použít pro přístup k vstupnímu textovému poli a spouštění jeho funkcí, jakmile je načten model objektu dokumentu (DOM).
Příklad
Podívejme se na níže uvedený příklad:
Napiš něco : < Typ vstupu = 'text' id = 'txt' zástupný symbol = 'Zadejte text...' >
< knoflík > Získejte hodnotu knoflík >
Ve výše uvedených řádcích kódu proveďte následující kroky:
- Zahrňte knihovnu jQuery, abyste mohli použít její metody.
- Upřesněte „ vstup “ jako textové pole se zadanými hodnotami “ id ' a ' zástupný symbol “ jak bylo diskutováno dříve.
- Také vytvořte tlačítko, abyste získali hodnotu po kliknutí na tlačítko.
Přejděte k části kódu JavaScript:
< skript >$ ( dokument ) . připraveno ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
řídicí panel. log ( $ ( 'vstupní text' ) . val ( ) ) ;
} ) ;
} ) ;
skript >
Postupujte podle uvedených kroků:
- Aplikujte „ připraven() ” za účelem aplikace dalších metod na načtený DOM.
- Otevřete vytvořené tlačítko a připojte „ klikni() ” metoda, která provede uvedenou funkci v jejím parametru.
- Metoda click() přistoupí k zadanému vstupnímu textovému poli a zaprotokoluje zadanou textovou hodnotu do konzole.
Výstup
Proto je hodnota typu zaznamenána na konzole.
To byly všechny různé způsoby, jak získat hodnotu textové oblasti pomocí JavaScriptu.
Závěr
' getElementById() “ metoda, “ addEventListener() “ metoda nebo “ jQuery ” lze použít k získání hodnoty textové oblasti v JavaScriptu. Metodu getElementById() lze implementovat pro přístup k vstupnímu textovému poli a zobrazení zadané hodnoty textové oblasti prostřednictvím výstrahy. Metodu addEventListener() lze použít k připojení „ vstup ” událost, která dostane textovou hodnotu při každém vstupu vedle sebe. jQuery lze použít pro přímý přístup k tlačítku a načtení zadané textové hodnoty po kliknutí na tlačítko na konzole. Tento tutoriál vysvětluje, jak získat hodnotu oblasti textu v JavaScriptu.