Webbläsare lägger ständigt till nya HTML-, JavaScript- och CSS-funktioner. Här är några användbara tillägg till att arbeta med formulär som du kanske har missat...
requestSubmit()
Safari 16 kommer att vara den sista webbläsaren att lägga till stöd för requestSubmit.
Innan vi tittar på hur .requestSubmit() fungerar, låt oss påminna oss själva om hur det går att skicka in ett formulär med JavaScript genom att använda .submit() metod. Skicka ett formulär med submit() utlöser inte en inlämningshändelse. Så i följande kod skickas formuläret, preventDefault() har ingen effekt, och ingenting loggas till konsolen:
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() kommer också att ignorera all HTML-formulärvalidering. Med tanke på följande uppmärkning kommer formuläret att skickas när inmatningen är tom trots att inmatningen har en required attribut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() är ett alternativt sätt att skicka in ett formulär med JavaScript, men i motsats till .submit(), HTML-formulärvalidering förhindrar att formuläret skickas. Om alla uppgifter som angetts i formuläret klarar valideringen, submit evenemanget kommer att avfyras, vilket betyder "formulär inskickat!" skulle loggas till konsolen i följande exempel:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Du kan redan uppnå detta genom att programiskt klicka på formulärets skicka-knapp, men requestSubmit är kanske en mer elegant lösning.
submitter egenskapen för inlämnande händelse
Smakämnen SubmitEvent.submitter förvärvad egendom fullständigt stöd för flera webbläsare med lanseringen av Safari 15.4. Denna skrivskyddade egenskap specificerar <button> or <input type="submit"> element som gjorde att ett formulär skickades.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>När du har flera skicka-knappar eller inmatningar, var och en med olika värden, kommer bara värdet på knappen eller inmatningen som klickades på för att skicka formuläret att skickas till servern, snarare än båda värdena. Det är inget nytt. Det nya är att evenemangslyssnaren för inlämningsevenemanget nu har tillgång till event.submitter fast egendom. Du kan använda detta för att lägga till en klass till knappen eller indata som utlöste formulärinlämningen, till exempel, eller för att få dess value eller något annat av dess HTML-attribut.
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 händelse
Detta är inte speciellt nytt, men bara uppnått stöd för flera webbläsare med lanseringen av Safari 15. Det huvudsakliga användningsfallet för formdata händelsen gör att anpassade element kan delta i formulärinlämningar. Utanför webbkomponenter kan det dock fortfarande vara användbart.
Du lägger till en formdata händelseavlyssnare till formuläret du vill interagera med:
document.querySelector('form').addEventListener('formdata', handleFormdata);Händelsen utlöses både av en vanlig HTML-formulärinlämning och även av en förekomst av new FormData(). event.formData innehåller alla uppgifter som lämnas in.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Återuppringningsfunktionen för formdata händelseavlyssnaren körs innan data skickas till servern, vilket ger dig en chans att lägga till eller ändra data som skickas.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Du kunde ha ändrat eller lagt till FormData inuti submit-händelsehanteraren men formdata låter dig skilja ut logiken. Det är också ett alternativ till att använda dolda inmatningar i uppmärkningen av ditt formulär i de fall du skickar in formuläret "på gammaldags sätt" - dvs att lita på den inbyggda funktionaliteten i HTML för att skicka formuläret istället för att göra det med fetch.
showPicker() för inmatningselement
showPicker() har uppburen sedan Chrome 99, Firefox 101 och i den kommande Safari 16. För ett indataelement vars typattribut är antingen Datum, Månad, Vecka, Tid, datetime-local, färg eller fil, showPicker() tillhandahåller ett programmatiskt sätt att visa urvalsgränssnittet. För färg- och filinmatningar har det alltid varit möjligt att programmässigt visa väljaren genom att anropa .click på ingången:
document.querySelector('input[type="color"]').click();Det tillvägagångssättet fungerar inte på datuminmatningar, vilket är anledningen till att detta nya API lades till. .showPicker() kommer också att fungera med färg- och filinmatningar men det finns ingen verklig fördel med att använda det över .click().
Inert attribut
Det har alltid varit möjligt att inaktivera flera ingångar samtidigt genom att slå in dem i en HTML fieldset och inaktivera fieldset:
Inert är ett nytt HTML-attribut. Det är inte bara för formulär, men formulär är verkligen ett viktigt användningsfall. till skillnad från disabled attribut, inert kan tillämpas på en form själva elementet. Allt i formuläret kommer att vara icke-fokuserbart och icke-klickbart. När det gäller hjälpmedel, inert liknar inställning aria-hidden="true". till skillnad från disabled attribut, inert tillämpar ingen stil som standard, men det är enkelt att lägga till din egen:
form[inert] {
opacity: .2;
}Det kommer mer...
Den stora är styling <select> element, något utvecklare har velat ha i årtionden. Det ser ut att äntligen bli verklighet någon gång snart med införandet av selectmenu.
Men det var allt för nu! De senaste uppdateringarna ger fullständigt webbläsarstöd till funktioner som vi har väntat på, vilket gör dem idealiska för produktionsanvändning.
