Nettlesere legger stadig til nye HTML-, JavaScript- og CSS-funksjoner. Her er noen nyttige tillegg til å jobbe med skjemaer du kanskje har gått glipp av...
requestSubmit()
Safari 16 vil være den siste nettleseren å legge til støtte for requestSubmit.
Før vi ser på hvordan .requestSubmit() fungerer, la oss minne oss selv på hvordan programmering av et skjema med JavaScript fungerer når du bruker .submit() metode. Sende inn skjema med submit() utløser ikke en innsendingshendelse. Så i følgende kode sendes skjemaet, preventDefault() har ingen effekt, og ingenting er logget på konsollen:
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() vil også ignorere all HTML-skjemavalidering. Gitt følgende markering, vil skjemaet sendes når inndata er tomt selv om inndata har en required Egenskap:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() er en alternativ måte å sende inn et skjema ved hjelp av JavaScript, men i motsetning til .submit(), vil HTML-skjemavalidering forhindre at skjemaet sendes inn. Hvis alle dataene som er lagt inn i skjemaet, består valideringen, submit arrangementet vil bli avfyrt, som betyr "skjema sendt!" vil bli logget på konsollen i følgende eksempel:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Du kan allerede oppnå dette ved å klikke på skjemaets send-knapp, men requestSubmit er kanskje en mer elegant løsning.
submitter egenskapen til å sende hendelsen
De SubmitEvent.submitter skaffet eiendom full støtte for flere nettlesere med utgivelsen av Safari 15.4. Denne skrivebeskyttede egenskapen spesifiserer <button> or <input type="submit"> element som førte til at et skjema ble sendt inn.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Når du har flere innsendingsknapper eller inndata, hver med en annen verdi, vil bare verdien av knappen eller input som ble klikket på for å sende inn skjemaet sendes til serveren, i stedet for begge verdiene. Det er ikke noe nytt. Det nye er at arrangementslytteren for innsendingsarrangementet nå har tilgang til event.submitter eiendom. Du kan bruke dette til å legge til en klasse til knappen eller input som utløste innsendingen av skjemaet, for eksempel, eller for å få value eller andre HTML-attributter.
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 hendelse
Dette er ikke spesielt nytt, men bare oppnådd støtte på tvers av nettlesere med utgivelsen av Safari 15. Hovedbrukssaken for formdata event lar tilpassede elementer delta i skjemainnsendinger. Utenfor webkomponenter kan det likevel være nyttig.
Du legger til en formdata hendelseslytter til skjemaet du vil samhandle med:
document.querySelector('form').addEventListener('formdata', handleFormdata);Arrangementet utløses både av en vanlig HTML-skjemainnsending og også av en forekomst av new FormData(). event.formData inneholder alle dataene som sendes inn.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Tilbakeringingsfunksjonen for formdata hendelseslytter kjører før dataene sendes til serveren, noe som gir deg en sjanse til å legge til eller endre dataene som sendes.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Du kunne ha endret eller lagt til FormData inne i send hendelsesbehandleren men formdata lar deg skille ut logikken. Det er også et alternativ til å bruke skjulte inndata i markeringen av skjemaet ditt i tilfeller der du sender inn skjemaet "på gammeldags måte" - dvs. stole på den innebygde funksjonaliteten til HTML for å sende inn skjemaet i stedet for å gjøre det med fetch.
showPicker() for inngangselementer
showPicker() har vært støttes siden Chrome 99, Firefox 101, og i den kommende Safari 16. For et input-element hvis typeattributt er enten Dato, Month, Week, Time, datetime-local, farge eller fil, showPicker() gir en programmatisk måte å vise valggrensesnittet på. For farge- og filinndata har det alltid vært mulig å programmere viser velgeren ved å ringe .click på inngangen:
document.querySelector('input[type="color"]').click();Den tilnærmingen fungerer ikke på datoinndata, og det er derfor denne nye API-en ble lagt til. .showPicker() vil også fungere med farge- og filinndata, men det er ingen reell fordel å bruke det over .click().
Inert attributt
Det har alltid vært mulig å deaktivere flere innganger samtidig ved å pakke dem inn i en HTML fieldset og deaktivere fieldset:
Inert er et nytt HTML-attributt. Det er ikke bare for skjemaer, men skjemaer er absolutt et viktig bruksområde. i motsetning til disabled Egenskap, inert kan brukes på en form selve elementet. Alt i skjemaet vil være ikke-fokuserbart og ikke-klikkbart. Når det gjelder hjelpeteknologier, inert ligner på innstilling aria-hidden="true". i motsetning til disabled Egenskap, inert bruker ingen styling som standard, men det er enkelt å legge til din egen:
form[inert] {
opacity: .2;
}Det kommer mer...
Den store er styling <select> elementer, noe utviklere har ønsket seg i flere tiår. Det ser ut til å endelig bli en realitet snart med introduksjonen av selectmenu.
Men det er det for nå! De siste oppdateringene gir full nettleserstøtte til funksjoner vi har ventet på, noe som gjør dem ideelle for produksjonsbruk.
