Tässä oppaassa opit, miten reagoida JavaScriptillä muutoksiin verkkolomakkeiden input-elementeissä. On tärkeää käyttää oikeita tapahtumankäsittelijöitä parantaaksesi käyttäjäkokemusta ja varmistaaksesi, että saat oikeat arvot jatkokäsittelyä varten. Erityisesti tarkastelemme onchange- ja oninput-tapahtumia varmistaaksemme, että syötteesi käsitellään dynaamisesti ja tehokkaasti.
Tärkeimmät havainnot
onchange-tapahtuma laukaistaan, kun käyttäjä poistaa fokuksen syöttökentästä ja tekee muutoksia.
oninput-tapahtuma laukaistaan jokaisesta syötteestä ja mahdollistaa suoran vuorovaikutuksen käyttäjän kanssa.
Syötekentistä palautuvat arvot ovat alun perin merkkijonoja ja ne saattavat vaatia oikean datatyypin muuntamista (esim. parseFloatilla tai valueAsNumberilla).
Askel-askeleelta-opas
Jotta voimme havainnollistaa mainitut käsitteet, käymme läpi eri vaiheet syötekentän tapahtumien rekisteröimiseksi ja tietojen käsittelyksi.
Vaihe 1: Syötekentän asettaminen
Aseta aluksi yksinkertainen numeron syötekenttä HTML-tiedostossasi. Järjestä HTML:si syötekentäksi ikäilmoitukselle.
Vaihe 2: onchange-tapahtuman lisääminen ja testaaminen
Nyt lisäämme tapahtumankäsittelijän onchange-tapahtumalle. Teemme tämän luomalla funktion, joka kutsutaan, kun käyttäjä poistaa fokuksen syötekentästä.
Huomaa, että arvon muuttuessa voimme suoraan päästä käsiksi syötekentän syötettyihin tietoihin.
Vaihe 3: Syötetietojen käsittely
Tässä funktiossa voit saada syötekentän arvon tapahtumaobjektin kautta. Pääsy arvoon tulisi tapahtua event.target.value avulla saadaksesi suoraan nykyisen arvon.
Voisi esiintyä tilanteita, joissa haluamme lähettää tai käsitellä syötettyä arvoa, mutta meidän on ensin tarkistettava se? Erilaisten arvotyyppien merkitys on tärkeää, etenkin jos haluat tehdä numeerisia laskelmia.
Vaihe 4: Arvon tyyppitarkistus
Kuten ehkä huomasit, syötekenttä palauttaa arvon aina merkkijonona. Varmistaaksesi, että saat numeron, voit käyttää tyyppimuunnosta. Voit käyttää parseFloat varmistaaksesi, että työskentelet oikealla datatyypillä.
Vaihe 5: oninput-tapahtuman toteutus
Jos tarvitset dynaamisen reaktion, kun käyttäjä syöttää jotain, on suositeltavaa käyttää oninput-metodia lisänä onchange-tapahtumalle. Tämä tarkoittaa, että aina kun käyttäjä painaa näppäintä tai muuttaa arvoa, funktio kutsutaan suoraan.
Vaihe 6: Kummankin tapahtuman vertailu
Huomioi, miten oninput ja onchange eroavat toisistaan. oninput aktivoituu jokaisesta syötteestä, kun taas onchange aktivoituu vain, kun käyttäjä poistuu syötekentästä. Tämä on erityisen hyödyllistä reaaliaikaisen palautteen tarpeessa.
Vaihe 7: Työskentely eri syötetyyppien kanssa
Ne menetelmät, jotka pätevät numerokentälle, pätevät myös muihin tyyppisiin, kuten tekstiin tai väriin. Jos käytät värivalintakenttää, huomaat nopeasti, että tapahtumien käyttö on sovitettava tyyppiin.
Tiivistelmä
Tässä oppaassa opit, miten käytät JavaScriptiä reagoimaan käyttäjän vuorovaikutukseen syötekentissä. Olet oppinut onchange- ja oninput-toimintojen toiminnan ja kuinka tärkeää on käsitellä syötteiden arvoja asianmukaisesti niiden tyypin mukaan.
Usein kysytyt kysymykset
Mitä tapahtumia voin käyttää syöte-elementeille?Voit käyttää onchange, oninput sekä muita tapahtumia kuten onclick tai tiettyjä näppäintapahtumia.
Kuinka saan nykyisen arvon syötekentästä?Käytä event.target.value saadaksesi nykyisen arvon.
Milloin onchange-tapahtuma laukeaa?Onchange-tapahtuma laukeaa, kun käyttäjä poistaa fokuksen syötekentästä ja tekee muutoksia.
Kuinka varmistan, että arvo tulkitaan numeroksi?Voit käyttää parseFloat() tai valueAsNumber muuntaaksesi merkkijonon numeroksi.
Onko eroja oninputin ja onchange:n välillä?Kyllä, oninput kutsutaan jokaisen arvon muutoksen yhteydessä, kun taas onchange laukeaa vain, kun fokus poistuu syötekentästä.
