Brskalniki nenehno dodajajo nove funkcije HTML, JavaScript in CSS. Tukaj je nekaj uporabnih dodatkov za delo z obrazci, ki ste jih morda spregledali ...
requestSubmit()
Safari 16 bo zadnji brskalnik za dodano podporo requestSubmit.
Preden pogledamo, kako .requestSubmit() deluje, spomnimo se, kako programsko oddajanje obrazca z JavaScriptom deluje pri uporabi .submit() metoda. Oddaja obrazca z submit() ne sproži dogodka oddaje. Torej je v naslednji kodi oddan obrazec, preventDefault() nima učinka in nič se ne beleži v konzolo:
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() bo prav tako prezrl kakršno koli preverjanje obrazca HTML. Glede na naslednjo oznako bo obrazec predložen, ko je vnos prazen, čeprav ima vnos a required atribut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() je alternativni način oddaje obrazca z uporabo JavaScripta, vendar v nasprotju z .submit(), preverjanje obrazca HTML prepreči pošiljanje obrazca. Če vsi podatki, vneseni v obrazec, prestanejo preverjanje, bo submit dogodek bo sprožen, kar pomeni "obrazec oddan!" bi bil prijavljen v konzolo v naslednjem primeru:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})To bi lahko dosegli že s programskim klikom gumba za pošiljanje v obrazcu, vendar requestSubmit je morda bolj elegantna rešitev.
submitter lastnost oddajnega dogodka
O SubmitEvent.submitter pridobljeno premoženje popolna podpora med brskalniki z izdajo Safarija 15.4. Ta lastnost samo za branje določa <button> or <input type="submit"> element, ki je povzročil predložitev obrazca.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Če imate več gumbov za oddajo ali vnosov, od katerih ima vsak drugačno vrednost, bo strežniku poslana samo vrednost gumba ali vnosa, na katerega ste kliknili za oddajo obrazca, ne pa obeh vrednosti. To ni nič novega. Novo je to, da ima poslušalec dogodkov za dogodek pošiljanja zdaj dostop do event.submitter premoženje. To lahko uporabite za dodajanje razreda gumbu ali vnosu, ki je na primer sprožil oddajo obrazca, ali za pridobitev njegovega value ali katerega koli drugega atributa HTML.
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 dogodek
To ni posebej novo, ampak samo dosegli podporo za več brskalnikov z izdajo Safarija 15. Glavni primer uporabe za formdata dogodek omogoča elementom po meri, da sodelujejo pri pošiljanju obrazcev. Zunaj spletnih komponent pa je lahko še vedno uporaben.
Dodate a formdata poslušalec dogodkov v obrazec, s katerim želite komunicirati:
document.querySelector('form').addEventListener('formdata', handleFormdata);Dogodek se sproži z običajno oddajo obrazca HTML in tudi z pojavom new FormData(). event.formData hrani vse posredovane podatke.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Funkcija povratnega klica za formdata poslušalec dogodkov se zažene, preden se podatki pošljejo strežniku, kar vam daje možnost, da dodate ali spremenite poslane podatke.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Lahko bi spremenili ali dodali FormData znotraj obdelovalnika dogodkov predložitve, vendar formdata vam omogoča, da ločite logiko. Je tudi alternativa uporabi skritih vnosov v označevanju vašega obrazca v primerih, ko obrazec oddate »na staromoden način« – tj. zanašate se na vgrajeno funkcionalnost HTML za oddajo obrazca, namesto da bi to storili z fetch.
showPicker() za vhodne elemente
showPicker() je bilo podprta od Chrome 99, Firefox 101 in v prihajajočem Safariju 16. Za vnosni element, katerega atribut tipa je datum, mesec, teden, čas, datetime-local, barva ali datoteka, showPicker() ponuja programski način za prikaz izbirnega uporabniškega vmesnika. Za vnose barv in datotek je bilo vedno mogoče programsko prikazati izbirnik s klicem .click na vhodu:
document.querySelector('input[type="color"]').click();Ta pristop ne deluje pri vnosih datumov, zato je bil dodan ta novi API. .showPicker() bo deloval tudi z barvnimi in datotečnimi vnosi, vendar ni nobene prave prednosti, če bi ga uporabili namesto njega .click().
Inertni atribut
Vedno je bilo mogoče onemogočiti več vnosov hkrati, tako da jih zavijete v HTML fieldset in onemogočanje fieldset:
Inert je nov atribut HTML. Ne gre le za obrazce, ampak so obrazci zagotovo ključni primer uporabe. Za razliko od disabled atribut, inert se lahko uporabi za a form element sam. Vse v obrazcu ne bo mogoče fokusirati in klikniti. Ko gre za podporne tehnologije, inert je podobna nastavitvi aria-hidden="true". Za razliko od disabled atribut, inert privzeto ne uporablja nobenega stila, vendar je enostavno dodati svojega:
form[inert] {
opacity: .2;
}Še več bo…
Največji je stil <select> elementov, kar so razvijalci želeli že desetletja. Zdi se, da bo kmalu končno postalo resničnost z uvedbo selectmenu.
Ampak to je to za zdaj! Nedavne posodobitve prinašajo popolno podporo brskalnika za funkcije, na katere smo čakali, zaradi česar so najboljše za produkcijsko uporabo.
