Selaimet lisäävät jatkuvasti uusia HTML-, JavaScript- ja CSS-ominaisuuksia. Tässä on joitain hyödyllisiä lisäyksiä lomakkeiden kanssa työskentelyyn, jotka olet ehkä unohtanut…
requestSubmit()
Safari 16 on viimeinen selain, jolle on lisättävä tuki requestSubmit.
Ennen kuin katsomme kuinka .requestSubmit() toimii, muistutetaan itseämme, kuinka lomakkeen ohjelmallinen lähettäminen JavaScriptillä toimii käytettäessä .submit() menetelmä. Lomakkeen lähettäminen kanssa submit() ei käynnistä lähetystapahtumaa. Joten seuraavassa koodissa lomake lähetetään, preventDefault() ei vaikuta, eikä konsoliin kirjata mitään:
const form = document.forms[0];
form.addEventListener('submit', function(event) {
// code to submit the form goes here
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.submit();
}).submit() jättää myös huomioimatta HTML-lomakkeen vahvistuksen. Kun otetaan huomioon seuraava merkintä, lomake lähetetään, kun syöte on tyhjä, vaikka syötteessä on a required määrite:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() on vaihtoehtoinen tapa lähettää lomake JavaScriptillä, mutta toisin kuin .submit(), HTML-lomakkeen vahvistus estää lomakkeen lähettämisen. Jos kaikki lomakkeelle syötetyt tiedot läpäisevät validoinnin, submit tapahtuma käynnistetään, mikä tarkoittaa "lomake lähetetty!" kirjataan konsoliin seuraavassa esimerkissä:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Voit jo saavuttaa tämän napsauttamalla ohjelmallisesti lomakkeen lähetyspainiketta, mutta requestSubmit on ehkä tyylikkäämpi ratkaisu.
submitter lähetystapahtuman ominaisuus
- SubmitEvent.submitter saatu omaisuus täysi selaimen välinen tuki Safari 15.4:n julkaisun myötä. Tämä vain luku -ominaisuus määrittää <button> or <input type="submit"> elementti, joka aiheutti lomakkeen lähettämisen.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Kun sinulla on useita lähetyspainikkeita tai syötteitä, joilla kullakin on eri arvo, vain sen painikkeen tai syötteen arvo, jota napsautettiin lomakkeen lähettämiseksi, lähetetään palvelimelle molempien arvojen sijaan. Se ei ole mitään uutta. Uutta on, että lähetettävän tapahtuman tapahtumaseuraajalla on nyt pääsy event.submitter omaisuutta. Tämän avulla voit lisätä esimerkiksi luokan painikkeeseen tai syötteeseen, joka käynnisti lomakkeen lähetyksen, tai hankkia sen value tai jokin muu sen HTML-attribuutti.
document.forms[0].addEventListener('submit', function(event) {
event.preventDefault();
console.log(event.submitter.value);
console.log(event.submitter.formaction);
event.submitter.classList.add('spinner-animation');
})formdata tapahtumaa varten
Tämä ei ole erityisen uutta, mutta vain saavuttanut selaimen välisen tuen Safari 15:n julkaisun kanssa. Pääkäyttötapaus formdata tapahtuma mahdollistaa mukautettujen elementtien osallistumisen lomakkeiden lähetyksiin. Verkkokomponenttien ulkopuolella se voi kuitenkin olla hyödyllinen.
Lisäät a formdata tapahtumakuuntelija lomakkeeseen, jonka kanssa haluat olla vuorovaikutuksessa:
document.querySelector('form').addEventListener('formdata', handleFormdata);Tapahtuma käynnistyy sekä tavallisesta HTML-lomakkeen lähettämisestä että myös esiintymisestä new FormData(). event.formData sisältää kaikki lähetettävät tiedot.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Takaisinsoittotoiminto formdata Tapahtuman kuuntelija suoritetaan ennen kuin tiedot lähetetään palvelimelle, mikä antaa sinulle mahdollisuuden lisätä tai muokata lähetettävää dataa.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Olisit voinut muokata tai liittää FormData lähetystapahtumakäsittelijän sisällä, mutta formdata voit erottaa logiikan. Se on myös vaihtoehto piilotettujen syötteiden käyttämiselle lomakkeen merkinnöissä tapauksissa, joissa lähetät lomakkeen "vanhanaikaiseen tapaan" eli luotat HTML:n sisäänrakennettuun toimintoon lomakkeen lähettämisessä sen sijaan, että teet sen fetch.
showPicker() syöttöelementeille
showPicker() on tuettu Chrome 99:stä, Firefox 101:stä ja tulevasta Safari 16:sta lähtien. Syöttöelementille, jonka type-attribuutti on joko Date, Month, Week, Time, datetime-local, väri tai tiedosto, showPicker() tarjoaa ohjelmallisen tavan näyttää valintakäyttöliittymä. Väri- ja tiedostosyötteitä varten valitsin on aina ollut mahdollista näyttää ohjelmallisesti soittamalla .click sisääntulossa:
document.querySelector('input[type="color"]').click();Tämä lähestymistapa ei toimi päivämäärän syötteillä, minkä vuoksi tämä uusi API lisättiin. .showPicker() toimii myös väri- ja tiedostosyötteiden kanssa, mutta sen käyttämisestä ei ole todellista hyötyä .click().
Inertti attribuutti
On aina ollut mahdollista poistaa useita syötteitä käytöstä kerralla käärimällä ne HTML-koodiin fieldset ja poistamalla käytöstä fieldset:
Inert on uusi HTML-attribuutti. Se ei ole vain lomakkeita varten, mutta lomakkeet ovat varmasti keskeinen käyttötapa. toisin kuin disabled attribuutti, inert voidaan soveltaa a form itse elementti. Kaikki lomakkeen sisällä ei ole tarkennettavissa eikä niitä voi napsauttaa. Mitä tulee avustaviin teknologioihin, inert on samanlainen kuin asetus aria-hidden="true". toisin kuin disabled attribuutti, inert ei käytä mitään tyyliä oletuksena, mutta on helppo lisätä oma:
form[inert] {
opacity: .2;
}Lisää on tulossa…
Suurin on muotoilu <select> elementtejä, joita kehittäjät ovat halunneet vuosikymmeniä. Näyttää siltä, että se tulee vihdoin todellisuutta joskus pian käyttöönoton myötä selectmenu.
Mutta siinä se nyt! Viimeaikaiset päivitykset tuovat täyden selaintuen ominaisuuksiin, joita olemme odottaneet, mikä tekee niistä ensisijaisia tuotantokäyttöön.
