Tämä kirjoitus selittää lähestymistavat tekstialueen arvon saamiseksi JavaScriptissä.
Kuinka saada tekstialueen arvo JavaScriptissä?
Tekstialueen arvo voidaan noutaa JavaScriptissä seuraavilla tavoilla:
- ' getElementById() ”menetelmä.
- ' addEventListener() ”menetelmä.
- ' jQuery ”.
Lähestymistapa 1: Hanki tekstialueen arvo JavaScriptissä käyttämällä getElementById()-menetelmää
' getElementById() ' -menetelmä käyttää elementtiä, jolla on määritetty ' id ”.Tämä menetelmä voidaan toteuttaa noutaa syöttötekstikenttä ja palauttaa syötetyn arvon siihen.
Syntaksi
asiakirja. getElementById ( elementti )
Annetussa syntaksissa:
- ' elementti ' viittaa ' id ” noudettava tiettyä elementtiä vastaan.
Esimerkki
Katsotaanpa seuraavaa esimerkkiä:
Sovelletaan seuraavia vaiheita alla olevassa koodissa:
< h3 > Hanki tekstialueen arvo sisään JavaScript h3 >
Kirjoita jotakin : < syötteen tyyppi = 'teksti' id = 'txt' paikanpitäjä = 'Syötä teksti...' >
< painiketta onclick = 'textareaValue()' > Hanki arvoa -painiketta >
Suorita seuraavat vaiheet:
- Määritä ensimmäisessä vaiheessa ilmoitettu otsikko.
- Sisällytä sen jälkeen syöttötekstikenttä määritetyllä ' id ' ja ' paikanpitäjä ”arvoa.
- Luo myös painike, johon on liitetty ' klikkaamalla ” tapahtuma uudelleenohjaus funktioon textareaValue()
Siirrytään eteenpäin koodin JavaScript-osaan:
< käsikirjoitus >toiminto textareaValue ( ) {
päästää saada = asiakirja. getElementById ( 'txt' ) . arvo
hälytys ( saada )
}
käsikirjoitus >
Yllä olevassa JavaScript-koodissa:
- Ilmoita funktio nimeltä ' textareaValue() ”.
- Määrityksessään pääset syöttötekstikenttään määritetyllä tunnuksella käyttämällä ' getElementById() ”menetelmä.
- Käytä myös ' arvo ”-ominaisuutta syötetyn tekstiarvon hakemiseksi.
- Näytä lopuksi tekstialueen arvo ' hälytys ' -valintaikkuna.
Lähtö
Yllä olevassa lähdössä voidaan havaita, että syötetty arvo noudetaan hälytysvalintaikkunan kautta.
Lähestymistapa 2: Hanki tekstialueen arvo JavaScriptissä käyttämällä addEventListener()-menetelmää
' addEventListener() '-menetelmää käytetään yhdistämään ' tapahtuma ”elementillä. Tätä menetelmää voidaan käyttää tapahtuman liittämiseen toimintoon siten, että tekstialueen arvo noudetaan jokaisesta syötteestä vierekkäin konsolissa.
Syntaksi
elementti. addEventListener ( tapahtuma , toiminto , exec )Yllä olevassa syntaksissa:
- ' tapahtuma ” osoittaa tapahtuman nimeen.
- ' toiminto ” ilmaisee toiminnon, joka suoritetaan tapahtuman laukaisussa.
- ' exec ” on valinnainen parametri.
Esimerkki
Noudatetaan alla olevaa esimerkkiä vaihe vaiheelta:
< tekstialueen tunnus = 'txtarea' rivit = '5' sarakkeet = '25' paikanpitäjä = 'Syötä teksti...' > tekstialue >
< skriptityyppi = 'teksti/javascript' >
päästää saada = asiakirja. getElementById ( 'txtarea' ) ;
konsoli. Hirsi ( saada . arvo ) ;
saada . addEventListener ( 'syöttö' , toiminto textareaValue ( tapahtuma ) {
konsoli. Hirsi ( tapahtuma. kohde . arvo ) ;
} ) ;
käsikirjoitus >
Yllä olevassa koodinpätkässä:
- Määritä ilmoitettu etiketti. Määritä myös ' tekstialue ' elementti määritetyllä arvolla ' id ' ja ' paikanpitäjä ” ja säädä myös sen mitat.
- Käytä koodin JavaScript-osassa määritettyä tekstialuetta edellisessä vaiheessa ja näytä se käyttämällä ' arvo ” omaisuutta.
- Liitä seuraavassa vaiheessa tapahtuma ' teksti 'haettuihin' tekstialue ' käyttämällä ' addEventListener() ' -menetelmää ja käytä sitä funktioon ' textareaValue() ”. ' tapahtuma ” argumentissaan välittää tietoa tapahtumasta, joka laukeaa.
- Tämä johtaa kaikkien syötettyjen tekstiarvojen kirjaamiseen vierekkäin.
Lähtö
Yllä olevasta lähdöstä ' hakeminen ' jokaisesta syötetystä tekstiarvosta voidaan havaita.
Lähestymistapa 3: Hanki tekstialueen arvo JavaScriptissä jQueryn avulla
' jQuery ' -ohjelmaa voidaan käyttää syöttötekstikentän avaamiseen ja sen toimintojen käynnistämiseen heti, kun asiakirjaobjektimalli (DOM) on ladattu.
Esimerkki
Noudatetaan alla olevaa esimerkkiä:
Kirjoita jotakin : < syötteen tyyppi = 'teksti' id = 'txt' paikanpitäjä = 'Syötä teksti...' >
< -painiketta > Hanki arvoa -painiketta >
Suorita yllä olevilla koodiriveillä seuraavat vaiheet:
- Sisällytä jQuery-kirjasto, jotta voit käyttää sen menetelmiä.
- Määritä ' syöttö ' tekstikentässä määritetyillä arvoilla ' id ' ja ' paikanpitäjä 'kuten aiemmin on keskusteltu.
- Luo myös painike saadaksesi arvon painiketta napsauttamalla.
Siirry koodin JavaScript-osaan:
< käsikirjoitus >$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
konsoli. Hirsi ( $ ( 'sijoita teksti' ) . val ( ) ) ;
} ) ;
} ) ;
käsikirjoitus >
Noudata ilmoitettuja vaiheita:
- Käytä ' valmis() ” -menetelmää, jotta lisämenetelmiä voidaan käyttää ladatussa DOM:ssa.
- Avaa luotu painike ja liitä ' klikkaus() ” -menetelmä, joka suorittaa parametrissaan määritellyn toiminnon.
- Click()-menetelmä käyttää määritettyä syöttötekstikenttää ja kirjaa syötetyn tekstin arvon konsoliin.
Lähtö
Tästä syystä tyypin arvo kirjataan konsoliin.
Nämä olivat kaikki erilaisia tapoja saada tekstialueen arvo JavaScriptin avulla.
Johtopäätös
' getElementById() 'menetelmä, ' addEventListener() ”menetelmä tai ” jQuery ' voidaan käyttää tekstialueen arvon saamiseksi JavaScriptissä. GetElementById()-menetelmä voidaan toteuttaa päästämään syöttötekstikenttään ja näyttämään syötetyn tekstialueen arvon hälytyksen kautta. AddEventListener()-menetelmää voidaan käyttää liittämään ' syöttö ”-tapahtuma, joka saa tekstiarvon jokaisesta syötteestä vierekkäin. jQuerya voidaan käyttää painikkeen suoraan käyttämiseen ja syötetyn tekstiarvon hakemiseen konsolin painikkeen napsautuksen jälkeen. Tämä opetusohjelma selittää, kuinka saada tekstialueen arvo JavaScriptissä.