I browser aggiungono costantemente nuove funzionalità HTML, JavaScript e CSS. Ecco alcune utili aggiunte per lavorare con i moduli che potresti esserti perso...
requestSubmit()
Safari 16 sarà il browser finale per cui aggiungere il supporto requestSubmit.
Prima di vedere come .requestSubmit() funziona, ricordiamoci come funziona l'invio a livello di codice di un modulo con JavaScript quando si utilizza il .submit() metodo. Invio di un modulo con submit() non attiva un evento di invio. Quindi nel codice seguente viene inviato il modulo, preventDefault() non ha alcun effetto e non viene registrato nulla sulla console:
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() ignorerà anche qualsiasi convalida del modulo HTML. Dato il seguente markup, il modulo verrà inviato quando l'input è vuoto anche se l'input ha a required attributo:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() è un modo alternativo per inviare un modulo utilizzando JavaScript, ma in contrasto con .submit(), la convalida del modulo HTML impedirà l'invio del modulo. Se tutti i dati inseriti nel modulo superano la convalida, il submit l'evento verrà attivato, che significa "modulo inviato!" verrebbe registrato sulla console nel seguente esempio:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Potresti già ottenere questo risultato facendo clic a livello di codice sul pulsante di invio del modulo, ma requestSubmit è forse una soluzione più elegante.
submitter proprietà dell'evento di invio
I SubmitEvent.submitter proprietà acquisita pieno supporto cross-browser con il rilascio di Safari 15.4. Questa proprietà di sola lettura specifica il <button> or <input type="submit"> elemento che ha causato l'invio di un modulo.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Quando hai più pulsanti di invio o input, ciascuno con un valore diverso, solo il valore del pulsante o input su cui è stato fatto clic per inviare il modulo verrà inviato al server, anziché entrambi i valori. Non è niente di nuovo. La novità è che il listener di eventi per l'evento di invio ora ha accesso a event.submitter proprietà. Puoi usarlo per aggiungere una classe al pulsante o all'input che ha attivato l'invio del modulo, ad esempio, o per ottenerlo value o qualsiasi altro dei suoi attributi 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 evento
Questo non è particolarmente nuovo, ma solo ottenuto il supporto cross-browser con il rilascio di Safari 15. Il caso d'uso principale per il formdata event consente agli elementi personalizzati di partecipare agli invii di moduli. Al di fuori dei componenti Web, tuttavia, può comunque essere utile.
aggiungi un formdata listener di eventi al modulo con cui vuoi interagire:
document.querySelector('form').addEventListener('formdata', handleFormdata);L'evento viene attivato sia da un normale invio di un modulo HTML sia da un'occorrenza di new FormData(). event.formData conserva tutti i dati inviati.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}La funzione di richiamata per il formdata il listener di eventi viene eseguito prima che i dati vengano inviati al server, dandoti la possibilità di aggiungere o modificare i dati inviati.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Avresti potuto modificare o aggiungere il FormData all'interno del gestore dell'evento di invio ma formdata ti permette di separare la logica. È anche un'alternativa all'uso di input nascosti nel markup del tuo modulo nei casi in cui stai inviando il modulo "alla vecchia maniera" - ad esempio affidandoti alla funzionalità integrata di HTML per inviare il modulo piuttosto che farlo con fetch.
showPicker() per gli elementi di input
showPicker() è stata supportato da Chrome 99, Firefox 101 e nel prossimo Safari 16. Per un elemento di input il cui attributo type è Data, Mese, Settimana, Ora, datetime-local, colore o file, showPicker() fornisce un modo programmatico per visualizzare l'interfaccia utente di selezione. Per gli input di colori e file, è sempre stato possibile mostrare il selettore a livello di codice chiamando .click in ingresso:
document.querySelector('input[type="color"]').click();Questo approccio non funziona sugli input di data, motivo per cui è stata aggiunta questa nuova API. .showPicker() funzionerà anche con input di file e colori, ma non c'è alcun vantaggio reale nell'usarlo .click().
Attributo inerte
È sempre stato possibile disabilitare più input contemporaneamente racchiudendoli in un HTML fieldset e disabilitando il fieldset:
Inert è un nuovo attributo HTML. Non è solo per i moduli, ma i moduli sono certamente un caso d'uso chiave. non mi piace il disabled attributo, inert può essere applicato ad a form elemento stesso. Tutto all'interno del modulo sarà non attivabile e non cliccabile. Quando si parla di tecnologie assistive, inert è simile all'impostazione aria-hidden="true". non mi piace il disabled attributo, inert non applica alcuno stile per impostazione predefinita, ma è facile aggiungerne uno tuo:
form[inert] {
opacity: .2;
}C'è altro in arrivo...
Il più grande è lo stile <select> elementi, qualcosa che gli sviluppatori desideravano da decenni. Sembra destinato a diventare finalmente una realtà presto con l'introduzione di selectmenu.
Ma per ora è tutto! I recenti aggiornamenti offrono il supporto completo del browser per formare le funzionalità che stavamo aspettando, rendendole ideali per l'uso in produzione.
