Tento zápis vysvetlí prístupy k získaniu hodnoty textovej oblasti v JavaScripte.
Ako získať hodnotu textovej oblasti v JavaScripte?
Hodnotu textovej oblasti je možné načítať v JavaScripte pomocou nasledujúcich prístupov:
- “ getElementById() “.
- “ addEventListener() “.
- “ jQuery “.
Prístup 1: Získajte hodnotu oblasti textu v JavaScripte pomocou metódy getElementById().
' getElementById() “ metóda pristupuje k prvku so zadaným “ id “Túto metódu možno implementovať na načítanie vstupného textového poľa a vrátenie zadanej hodnoty v ňom.
Syntax
dokument. getElementById ( prvok )
V danej syntaxi:
- “ prvok “ odkazuje na „ id “, ktoré sa majú získať proti konkrétnemu prvku.
Príklad
Pozrime sa na nasledujúci príklad:
Aplikujme nasledujúce kroky v nižšie uvedenom kóde:
< h3 > Získajte hodnotu oblasti textu v JavaScript h3 >
Napíšte niečo : < typ vstupu = 'text' id = 'TXT' zástupný symbol = 'Zadajte text...' >
< tlačidlo onclick = 'textareaValue()' > Získajte hodnotu tlačidlo >
Vykonajte nasledujúce kroky:
- V prvom kroku špecifikujte uvedený nadpis.
- Potom zahrňte vstupné textové pole so zadaným „ id “ a „ zástupný symbol “hodnota.
- Vytvorte tiež tlačidlo s pripojeným „ po kliknutí ” presmerovanie udalosti na funkciu textareaValue()
Poďme vpred k časti kódu JavaScript:
< skript >funkciu textareaValue ( ) {
nech dostať = dokument. getElementById ( 'TXT' ) . hodnotu
upozorniť ( dostať )
}
skript >
Vo vyššie uvedenom kóde JavaScript:
- Deklarujte funkciu s názvom „ textareaValue() “.
- V jeho definícii vstúpte do vstupného textového poľa pomocou jeho špecifikovaného ID pomocou „ getElementById() “.
- Tiež použite „ hodnotu ” na získanie zadanej textovej hodnoty.
- Nakoniec zobrazte hodnotu textovej oblasti pomocou „ upozorniť “ dialógové okno.
Výkon
Vo vyššie uvedenom výstupe je možné pozorovať, že zadaná hodnota sa načíta cez dialógové okno výstrahy.
Prístup 2: Získajte hodnotu oblasti textu v JavaScripte pomocou metódy addEventListener().
' addEventListener() “ metóda sa používa na priradenie “ udalosť “ s prvkom. Túto metódu možno použiť na pripojenie udalosti k funkcii tak, že hodnota textovej oblasti sa načíta pri každom vstupe vedľa seba na konzole.
Syntax
prvok. addEventListener ( udalosť , funkciu , exec )Vo vyššie uvedenej syntaxi:
- “ udalosť “ ukazuje na názov udalosti.
- “ funkciu ” označuje funkciu, ktorá sa má spustiť pri spustení udalosti.
- “ exec ” je voliteľný parameter.
Príklad
Nasledujme krok za krokom nižšie uvedený príklad:
< id textovej oblasti = 'txtarea' riadkov = '5' stĺpce = '25' zástupný symbol = 'Zadajte text...' > textarea >
< typ skriptu = 'text/javascript' >
nech dostať = dokument. getElementById ( 'txtarea' ) ;
konzoly. log ( dostať . hodnotu ) ;
dostať . addEventListener ( 'vstup' , funkciu textareaValue ( udalosť ) {
konzoly. log ( udalosť. cieľ . hodnotu ) ;
} ) ;
skript >
Vo vyššie uvedenom útržku kódu:
- Uveďte uvedený štítok. Tiež prideľte „ textarea prvok so zadanou hodnotou ' id “ a „ zástupný symbol “ a upravte aj jeho rozmery.
- V JavaScriptovej časti kódu vstúpte do špecifikovanej textovej oblasti v predchádzajúcom kroku a zobrazte ju pomocou „ hodnotu ' nehnuteľnosť.
- V ďalšom kroku pripojte udalosť “ text “do vyzdvihnutého” textová oblasť “ pomocou „ addEventListener() “ metódu a aplikujte ju na funkciu “ textareaValue() “. ' udalosť ” vo svojom argumente odovzdá informácie o udalosti, ktorá je spustená.
- Výsledkom bude protokolovanie každej zo zadaných textových hodnôt vedľa seba.
Výkon
Z vyššie uvedeného výstupu je „ aportovanie ” každej zo zadaných textových hodnôt.
Prístup 3: Získajte hodnotu oblasti textu v JavaScripte pomocou jQuery
“ jQuery ” možno použiť na prístup k vstupnému textovému poľu a spustenie jeho funkcií hneď po načítaní modelu objektu dokumentu (DOM).
Príklad
Nasledujme príklad uvedený nižšie:
Napíšte niečo : < typ vstupu = 'text' id = 'TXT' zástupný symbol = 'Zadajte text...' >
< tlačidlo > Získajte hodnotu tlačidlo >
Vo vyššie uvedených riadkoch kódu vykonajte nasledujúce kroky:
- Zahrňte knižnicu jQuery, aby ste mohli použiť jej metódy.
- Zadajte „ vstup “ ako textové pole so špecifikovanými hodnotami “ id “ a „ zástupný symbol “, ako už bolo povedané.
- Vytvorte tiež tlačidlo, aby ste získali hodnotu po kliknutí na tlačidlo.
Prejdite na časť kódu JavaScript:
< skript >$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
konzoly. log ( $ ( 'vstup:text' ) . val ( ) ) ;
} ) ;
} ) ;
skript >
Postupujte podľa uvedených krokov:
- Použiť „ pripravený() “, aby ste mohli aplikovať ďalšie metódy na načítaný DOM.
- Prejdite k vytvorenému tlačidlu a pripojte „ klikni() ” metóda, ktorá vykoná uvedenú funkciu vo svojom parametri.
- Metóda click() sprístupní zadané vstupné textové pole a zaznamená zadanú textovú hodnotu do konzoly.
Výkon
Preto je hodnota typu zaznamenaná na konzole.
To všetko boli rôzne spôsoby získania hodnoty textovej oblasti pomocou JavaScriptu.
Záver
' getElementById() “ metóda, “ addEventListener() “ metóda alebo “ jQuery ” možno použiť na získanie hodnoty textovej oblasti v JavaScripte. Metódu getElementById() možno implementovať na prístup k vstupnému textovému poľu a zobrazenie zadanej hodnoty textovej oblasti prostredníctvom upozornenia. Metódu addEventListener() možno použiť na pripojenie „ vstup ” udalosť, ktorá dostane textovú hodnotu pri každom vstupe vedľa seba. jQuery je možné použiť na priamy prístup k tlačidlu a na získanie zadanej textovej hodnoty po kliknutí na tlačidlo na konzole. Tento tutoriál vysvetľuje, ako získať hodnotu oblasti textu v JavaScripte.