Šiame pamokymo vadove išmoksi, kaip su JavaScript atsakstyti į pakeitimus input elementuose tinklapio formose. Svarbu naudoti tinkamus įvykių tvarkyklės, kad būtų pagerinta naudotojo patirtis ir užtikrinta teisingų reikšmių gavimas tolimesnei apdorojimui. Ypač aptarsime onchange ir oninput įvykius, kad būtų užtikrintas dinamiškas ir efektyvus jūsų įvesties apdorojimas.
Svarbiausios išvados
onchange įvykis suaktyvinamas, kai naudotojas išima fokusą iš įvesties lauko ir buvo padaryti pakeitimai.- oninput įvykis suaktyvinamas kiekvieną kartą įvedus ir leidžia tiesioginį sąveiką su naudotoju.
- Reikšmės, grąžinamos iš input elementų, pradinėmis yra eilutėmis ir gali prireikti konvertuoti į tinkamą duomenų tipą (pvz., naudojant parseFloat ar valueAsNumber).
Žingsnis po žingsnio vadovas
Siekiant parodyti minėtus konceptus, eisime per skirtingus žingsnius, kad registruotume įvykius į įvesties lauką ir dirbtume su duomenimis.
1 žingsnis: Įvesties elemento sukūrimas
Pirma turi sukurti paprastą skaičių įvesties elementą savo HTML faile. Struktūrizuok savo HTML su įvesties lauku amžiaus nurodymui.
2 žingsnis: onchange-įvykio pridėjimas ir bandymas
Dabar pridėsime įvykių tvarkyklį į onchange įvykį. Tai padarysime sukurdami funkciją, kuri bus iškviesta, kai naudotojas išima fokusą iš įvesties elemento.
Svarbu pastebėti, kad keičiantis vertimui galime tiesiogiai pasiekti įvesties elemento įvestus duomenis.
3 žingsnis: Įvesties vertės tvarkymas
Šioje funkcijoje galite gauti įvesties elemento vertę pervyčio įvykio objektą. Norint tiesiogiai gauti dabartinę vertę, turėtumėte naudoti event.target.value.
Gali kilti situacijų, kai norime paskelbti ar apdoroti įvestą vertę, bet turime ją patikrinti. Skirtingi vertės tipai yra svarbūs, ypač jei norite atlikti skaitinius skaičiavimus.
4 žingsnis: Vertės tipo patikrinimas
Kaip pastebėjote, input elementas visada grąžina vertę kaip eilutę. Norėdami užtikrinti, kad gausime skaičių, galime naudoti tipų konvertavimą. Galite naudoti parseFloat, kad būtų užtikrintas teisingas duomenų tipas.
5 žingsnis: oninput-įvykio įgyvendinimas
Jei reikia dinaminės reakcijos, kai naudotojas kažką įveda, turėtumėte naudoti oninput metodą papildymui onchange. Tai reiškia, kad kiekvieną kartą, kai naudotojas spaudžia klavišą ar keičia vertę, funkcija tiesiogiai iškviama.
6 žingsnis: Abiejų įvykių palyginimas
Atkreipkite dėmesį, kaip oninput ir onchange skiriasi. oninput aktyvuojamas kiekvieną įvestį, o onchange aktyvuojamas tik tada, kai naudotojas palieka laukelį. Tai ypač naudinga, jei norimas realaus laiko grįžtamasis ryšys.
7 žingsnis: Darbas su skirtingais įvedimo tipais
Metodai, kuriuos naudojate skaičiaus tipo įvesties laukui, taip pat taikomi kitokiems tipams kaip tekstas ar spalva. Jei naudojate lauką spalvos pasirinkimui, greitai suprasite, kad reikia pritaikyti įvykius pagal tipą.
Suvestinė
Šiame vadove jūs išmokote, kaip naudoti JavaScript, kad reaguotumėte į vartotojo sąveikas su įvedimo laukais. Jūs sužinojote, kaip veikia onchange ir oninput bei kaip svarbu tinkamai apdoroti įvedimo reikšmes pagal tipą.
Daugiausiai užduodamų klausimų
Kokius įvykius galiu naudoti input elementams?Tu gali naudoti onchange, oninput, taip pat kitus įvykius, pvz., onclick arba specifinius klaviatūros įvykius.
Kaip gauti dabartinę įvesties lauko reikšmę?Naudok event.target.value, norėdamas gauti dabartinę reikšmę.
Kada yra paleidžiamas onchange įvykis?onchange įvykis yra paleidžiamas, kai vartotojas paima fokusą nuo įvedimo lauko ir padarė pakeitimus.
Kaip užtikrinti, kad reikšmė būtų interpretuojama kaip skaičius?Tu gali naudoti parseFloat() arba valueAsNumber, norėdamas paversti eilutę į skaičių.
Ar yra skirtumų tarp oninput ir onchange?Taip, oninput yra iškviestas kiekvieną reikšmės pakeitimą, tuo tarpu onchange yra paleidžiamas tik tada, kai fokusas palieka įvedimo lauką.
