Lomakkeen nollaustapahtumat ja tilanhallinta
Käsittele lomakkeen nollaus ja seuraa kentän tilaa käyttäjän toimintojen aikana
Lomakkeen nollaustapahtumat ja tilanhallinta on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
reset-tapahtuma
form.reset()-metodin kutsuminen tai <button type="reset">-painikkeen napsauttaminen laukaisee lomakkeessa reset-tapahtuman. Jokainen kenttä palautuu alkuperäiseen arvoonsa eli value-attribuutin arvoon tai tyhjäksi uusissa syötekentissä. Kuuntele tapahtumaa, jos haluat reagoida resetointiin ohjelmallisesti.
Oletusarvot
Resetoinnissa käytettävä alkutila määräytyy defaultValue-, defaultChecked- tai defaultSelected-ominaisuuden perusteella, ei nykyisen arvon perusteella. Nämä vastaavat HTML:n value-, checked- ja selected-attribuutteja, jotka asetetaan jäsennyksen aikana eivätkä muutu käyttäjän toiminnan seurauksena.
Oletusarvojen päivittäminen ohjelmallisesti
Jos haluat tehdä nykyisestä arvosta uuden "oletusarvon" niin, että myöhemmät resetoinnit palauttavat siihen, aseta input.defaultValue = input.value. Tämä on hyödyllistä onnistuneen tallennuksen jälkeen: myöhemmät resetoinnit palauttavat tallennetun tilan alkuperäisen tyhjän lomakkeen sijaan.
form.addEventListener("submit", () => {
// After save, treat current as defaults
Array.from(form.elements).forEach((el) => {
if ("defaultValue" in el) el.defaultValue = el.value;
});
});reset-tapahtuman kuunteleminen
reset-tapahtuma laukeaa ennen kuin arvot palautetaan. Jos haluat tutkia resetoinnin jälkeistä tilaa, siirrä tarkistus seuraavaan mikrotehtävään: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Tämä tapahtuma-ajankohdan yksityiskohta aiheuttaa usein sekaannusta.
Resetoinnin estäminen
Jos kutsut e.preventDefault()-metodia reset-tapahtumankäsittelijässä, resetointi peruutetaan ja arvot säilyvät ennallaan. Tämä on hyödyllistä esimerkiksi "oletko varma?"-vahvistuksissa, kun lomakkeessa on paljon käyttäjän syöttämiä tietoja.
Muokkaustilan seuranta
Vertaa nykyisiä arvoja oletusarvoihin selvittääksesi, onko lomaketta muokattu: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Tämän avulla voit ottaa tallennuspainikkeen käyttöön tai poistaa sen käytöstä ja näyttää vahvistuksen tallentamattomista muutoksista.
beforeunload-vahvistus
Jos haluat varoittaa käyttäjää poistumisesta, kun lomakkeessa on tallentamattomia muutoksia: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Selain näyttää yleisen "poistutaanko sivustolta?"-kehotteen. Mukautettuja viestejä ei enää tueta nykyaikaisissa selaimissa.
Reset-painikkeet tarjoavat yleensä huonon käyttökokemuksen
Reset-painikkeet tyhjentävät jokaisen kentän yhdellä vahinkoklikkauksella, usein tuhoisin seurauksin. Useimmat nykyaikaiset käyttöliittymät jättävät ne kokonaan pois tai piilottavat ne vahvistuksen taakse. Jos resetointia tarvitaan, sijoita painike kauas lähetyspainikkeesta ja harkitse yhden vaiheen kumoamista.
Lomakkeen tilan säilyttäminen
Pitkissä lomakkeissa tallenna tila localStorageen input-tapahtumien yhteydessä ja palauta se latauksen aikana. Lisää mukaan "Palautetaanko luonnos?"-vahvistus, jotta käyttäjä ei menetä työtään välilehden sulkeutuessa vahingossa. Tyhjennä tallennettu tila reset- ja lähetyskäsittelijöissä, kun sitä ei enää tarvita.
form.addEventListener("input", () => {
localStorage.setItem("form-draft", JSON.stringify(new FormData(form)));
});Mukautetut komponentit ja reset
Mukautetut lomake-elementit, jotka on toteutettu web-komponentteina, osallistuvat lomakkeen resetointiin ElementInternalsin avulla. Palauta oletusarvo formResetCallback-metodissa. Tämä on tarpeen, kun mukautettu elementti sisältää sisäisen syötekentän, joka on palautettava erikseen.
Lomakkeeseen liitetyt mukautetut elementit
Kun mukautetun elementin luokassa määritetään static formAssociated = true ja käytetään metodia this.attachInternals(), käyttöön tulevat formResetCallback, formStateRestoreCallback, formDisabledCallback ja formAssociatedCallback. Näiden avulla elementti voidaan yhdistää lomakkeen elinkaareen.
Tietotesti
Mihin arvoon kukin kenttä palautuu, kun form.reset()-metodia kutsutaan?
Yhteenveto
reset-tapahtuma laukeaa, kun form.reset() suoritetaan, ja kentät palautuvat arvoihin defaultValue/defaultChecked/defaultSelected. Päivitä oletusarvot tallennuksen jälkeen, jotta niistä tulee uusi resetointitila. Seuraa muokkaustilaa vertaamalla nykyisiä arvoja oletusarvoihin, säilytä pitkien lomakkeiden tila localStoragessa ja käytä beforeunload-tapahtumaa navigointivaroituksiin. Mukautetut elementit integroituvat formAssociated- ja formResetCallback-ominaisuuksien avulla.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Lomakkeen nollaustapahtumat ja tilanhallinta” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Lomakkeen nollaustapahtumat ja tilanhallinta”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Lomakkeen nollaustapahtumat ja tilanhallinta”?
Käsittele lomakkeen nollaus ja seuraa kentän tilaa käyttäjän toimintojen aikana Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Lomakkeen nollaustapahtumat ja tilanhallinta”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- FormData API
- Constraint Validation API
- reportValidity ja setCustomValidity
- Lomakkeen nollaustapahtumat ja tilanhallinta