Veebisaitide jaoks vormide loomine (praktiline õpetus)

Reageeri sisendi elementides tehtavatele muudatustele JavaScripti abil

Kõik õpetuse videod Loo veebisaitidele vormide loomine (praktiline juhend)

Selles õpetuses saate õppida, kuidas JavaScripti abil reageerida veebihaldusvormide sisendi-elementide muudatustele. On oluline kasutada sobivaid sündmuskäsitlejaid, et optimeerida kasutajakogemust ja tagada õigete väärtuste saamine edasiseks töötlemiseks. Eriti keskendume sündmustele onchange ja oninput, et tagada, et teie sisendid töödeldakse dünaamiliselt ja tõhusalt.

Põhilised järeldused

  • Sündmus onchange käivitub, kui kasutaja eemaldab fookuse sisendiväljalt ja muudatusi on tehtud.
  • Sündmus oninput käivitub iga sisestuse korral ja võimaldab otsest suhtlust kasutajaga.
  • Sisendelementidelt tagastatud väärtused on alguses stringid ja neid võib olla vaja teisendada õigesse andmetüüpi (nt parseFloat või valueAsNumber).

Juhised samm-sammult

Neid mõisteid demonstreerimiseks läheme läbi erinevate sammude, et registreerida sündmusi sisendiväljas ja töötada nende andmetega.

Samm 1: Sisendelemendi seadistamine

Esiteks pead looma lihtsa arvu sisendi elemendi oma HTML-faili. Struktureeri oma HTML koos sisendi välja vanuse määramiseks.

Reageeri sisestuselementides toimunud muudatustele JavaScripti abil

Samm 2: onchange-sündmuse lisamine ja testimine

Nüüd lisame onchange sündmuse käsitleja. Teeme seda luues funktsiooni, mis käivitatakse, kui kasutaja eemaldab sisendi elemendilt fookuse.

Reageeri sisendielementide muudatustele JavaScripti abil

Oluline on märkida, et väärtuse muutumisel pääseme ligi sisendi elemendi sisestatud andmetele otse.

Reageeri sisestuselementides toimuvatele muudatustele JavaScriptiga

Samm 3: Sisendväärtuse töötlemine

Antud funktsiooni sees saate sisendi elemendi väärtuse kätte sündmuseobjekti kaudu. Juurdepääs väärtusele peaks olema läbi event.target.value, et saada praegune väärtus otse.

Reageeri sisendi elementides tehtavatele muudatustele JavaScriptiga

Võib esineda olukordi, kus soovite sisestatud väärtust postitada või töödelda, kuid peate seda enne kontrollima. Siin on tähtsad erinevate väärtustüüpide nagu numbrilised arvutused tegemisel.

Reageeri sisendelementide muutustele JavaScriptiga

Samm 4: Väärtuse tüübi kontrollimine

Nagu olete võib-olla märganud, tagastab sisendi element väärtuse alati stringina. Et veenduda, et saame numbri, saame kasutada tüübi muundamist. Saate kasutada parseFloat, et veenduda, et töötame õige andmetüübiga.

Samm 5: oninput-sündmuse rakendamine

Kui vajate kasutaja sisestamisel dünaamilist reaktsiooni, peaksite kasutama oninput meetodit onchange täiendusena. See tähendab, et iga kord kui kasutaja vajutab klahvi või muudab väärtust, käivitatakse funktsioon otse.

Reageeri sisestuselementide muudatustele JavaScriptiga

Samm 6: Kahe sündmuse võrdlus

Pange tähele, kuidas oninput ja onchange erinevad. Oninput aktiveeritakse iga sisestamise korral, samas kui onchange aktiveeritakse ainult siis, kui kasutaja lahkub sisendiväljast. See on eriti kasulik reaalajas tagasiside korral.

Reageeri muudatustele sisendelementides JavaScript abil

Samm 7: Töötamine erinevate sisestustüüpidega

Meetodid, mida kasutate number tüüpi sisendi väljaga, kehtivad ka teiste tüüpide, näiteks teksti või värvi korral. Kui kasutate välja värvi valimiseks, saate kiiresti aru, et sündmused tuleks vastavalt tüübile kohandada.

Reageeri sisendelementides tehtavatele muudatustele JavaScriptiga

Kokkuvõte

Selles õpetuses õppisid sa, kuidas kasutada JavaScripti kasutaja sisendi reageerimiseks sisendväjadele. Sa said teada onchange ja oninput toimimise ning kui oluline on töödelda sisendväärtusi vastavalt tüübile.

Korduma kippuvad küsimused

Mis sündmusi saan kasutada sisendelementidega?Sa saad kasutada onchange, oninput ja teisi sündmusi nagu onclick või konkreetseid klaviatuuri sündmusi.

Kuidas saada praegune sisendi väli väärtus?Kasuta event.target.value, et saada praegust väärtust.

Millal käivitatakse onchange sündmus?Onchange sündmus käivitatakse, kui kasutaja eemaldab fookuse sisendväljalt ja teeb muudatusi.

Kuidas tagada, et väärtus tõlgendatakse arvuna?Sa saad kasutada parseFloat() või valueAsNumber, et teisendada string arvuks.

Kas on erinevusi oninputi ja onchange'i vahel?Jah, oninput käivitatakse iga väärtuse muutmise korral, samas kui onchange käivitatakse ainult siis, kui fookus lahkub sisendväljalt.