Τα προγράμματα περιήγησης προσθέτουν συνεχώς νέες δυνατότητες HTML, JavaScript και CSS. Ακολουθούν ορισμένες χρήσιμες προσθήκες για την εργασία με φόρμες που μπορεί να έχετε χάσει…
requestSubmit()
Safari 16 θα είναι το τελευταίο πρόγραμμα περιήγησης για να προσθέσετε υποστήριξη requestSubmit.
Πριν δούμε πώς .requestSubmit() λειτουργεί, ας υπενθυμίσουμε στον εαυτό μας πώς λειτουργεί μέσω προγραμματισμού η υποβολή μιας φόρμας με JavaScript κατά τη χρήση του .submit() μέθοδος. Υποβολή φόρμας με submit() δεν ενεργοποιεί ένα συμβάν υποβολής. Έτσι στον παρακάτω κώδικα υποβάλλεται η φόρμα, preventDefault() δεν έχει αποτέλεσμα και τίποτα δεν καταγράφεται στην κονσόλα:
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() θα αγνοήσει επίσης οποιαδήποτε επικύρωση φόρμας HTML. Λαμβάνοντας υπόψη την ακόλουθη σήμανση, η φόρμα θα υποβληθεί όταν η είσοδος είναι άδεια, παρόλο που η είσοδος έχει α required Χαρακτηριστικό:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() είναι ένας εναλλακτικός τρόπος υποβολής μιας φόρμας χρησιμοποιώντας JavaScript, αλλά σε αντίθεση με .submit(), η επικύρωση φόρμας HTML θα αποτρέψει την υποβολή της φόρμας. Εάν όλα τα δεδομένα που εισάγονται στη φόρμα περάσουν από επικύρωση, το submit Το συμβάν θα ενεργοποιηθεί, που σημαίνει "υποβολή φόρμας!" θα καταγραφεί στην κονσόλα στο ακόλουθο παράδειγμα:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Θα μπορούσατε ήδη να το επιτύχετε αυτό κάνοντας κλικ μέσω προγραμματισμού στο κουμπί υποβολής της φόρμας, αλλά requestSubmit είναι ίσως μια πιο κομψή λύση.
submitter ιδιοκτησία υποβολής συμβάντος
Η SubmitEvent.submitter περιουσία που αποκτήθηκε πλήρη υποστήριξη μεταξύ προγραμμάτων περιήγησης με την κυκλοφορία του Safari 15.4. Αυτή η ιδιότητα μόνο για ανάγνωση καθορίζει το <button> or <input type="submit"> στοιχείο που προκάλεσε την υποβολή μιας φόρμας.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Όταν έχετε πολλά κουμπιά ή εισόδους υποβολής, το καθένα με διαφορετική τιμή, μόνο η τιμή του κουμπιού ή της εισαγωγής που κάνατε κλικ για να υποβάλετε τη φόρμα θα σταλεί στον διακομιστή και όχι και στις δύο τιμές. Αυτό δεν είναι κάτι καινούργιο. Αυτό που είναι νέο είναι ότι το πρόγραμμα ακρόασης συμβάντων για το συμβάν υποβολής έχει πλέον πρόσβαση στο event.submitter ιδιοκτησία. Μπορείτε να το χρησιμοποιήσετε για να προσθέσετε μια κλάση στο κουμπί ή την είσοδο που ενεργοποίησε την υποβολή της φόρμας, για παράδειγμα, ή για να αποκτήσετε value ή οποιοδήποτε άλλο από τα χαρακτηριστικά 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 συμβάν
Αυτό δεν είναι ιδιαίτερα νέο, αλλά μόνο πέτυχε υποστήριξη μεταξύ προγραμμάτων περιήγησης με την κυκλοφορία του Safari 15. Η κύρια περίπτωση χρήσης για το formdata Το συμβάν επιτρέπει στα προσαρμοσμένα στοιχεία να συμμετέχουν στις υποβολές φόρμας. Ωστόσο, εκτός των στοιχείων ιστού, μπορεί να είναι χρήσιμο.
Προσθέτεις α formdata πρόγραμμα ακρόασης συμβάντος στη φόρμα με την οποία θέλετε να αλληλεπιδράσετε:
document.querySelector('form').addEventListener('formdata', handleFormdata);Το συμβάν ενεργοποιείται τόσο από μια κανονική υποβολή φόρμας HTML όσο και από μια εμφάνιση new FormData(). event.formData κρατά όλα τα δεδομένα που υποβάλλονται.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}Η λειτουργία επανάκλησης για το formdata Το πρόγραμμα ακρόασης συμβάντων εκτελείται πριν από την αποστολή των δεδομένων στον διακομιστή, δίνοντάς σας την ευκαιρία να προσθέσετε ή να τροποποιήσετε τα δεδομένα που αποστέλλονται.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Θα μπορούσατε να έχετε τροποποιήσει ή προσαρτήσει το FormData μέσα στο πρόγραμμα χειρισμού συμβάντων υποβολής αλλά formdata σας επιτρέπει να διαχωρίσετε τη λογική. Είναι επίσης μια εναλλακτική λύση στη χρήση κρυφών εισόδων στη σήμανση της φόρμας σας σε περιπτώσεις όπου υποβάλλετε τη φόρμα "με τον παλιό τρόπο" — δηλαδή βασίζεστε στην ενσωματωμένη λειτουργικότητα του HTML για να υποβάλετε τη φόρμα αντί να την κάνετε με fetch.
showPicker() για στοιχεία εισόδου
showPicker() υπήρξε υποστηρίζονται από το Chrome 99, τον Firefox 101 και το επερχόμενο Safari 16. Για ένα στοιχείο εισόδου του οποίου το χαρακτηριστικό τύπου είναι είτε Ημερομηνία, Μήνας, Εβδομάδα, Ώρα, datetime-local, χρώμα ή αρχείο, showPicker() παρέχει έναν προγραμματικό τρόπο εμφάνισης της διεπαφής χρήστη επιλογής. Για τις εισαγωγές χρωμάτων και αρχείων, ήταν πάντα δυνατό να εμφανιστεί μέσω προγραμματισμού ο επιλογέας μέσω κλήσης .click στην είσοδο:
document.querySelector('input[type="color"]').click();Αυτή η προσέγγιση δεν λειτουργεί στις εισαγωγές ημερομηνίας, γι' αυτό προστέθηκε αυτό το νέο API. .showPicker() θα λειτουργήσει επίσης με εισόδους χρώματος και αρχείων, αλλά δεν υπάρχει πραγματικό πλεονέκτημα να το χρησιμοποιήσετε ξανά .click().
Αδρανή ιδιότητα
Ήταν πάντα δυνατό να απενεργοποιήσετε πολλές εισόδους ταυτόχρονα, τυλίγοντάς τις σε ένα HTML fieldset και απενεργοποιώντας το fieldset:
Το Inert είναι ένα νέο χαρακτηριστικό HTML. Δεν είναι μόνο για φόρμες, αλλά οι φόρμες είναι σίγουρα μια βασική περίπτωση χρήσης. σε αντίθεση με το disabled Χαρακτηριστικό, inert μπορεί να εφαρμοστεί σε α form το ίδιο το στοιχείο. Τα πάντα μέσα στη φόρμα θα είναι μη εστιάσιμα και χωρίς κλικ. Όταν πρόκειται για υποστηρικτικές τεχνολογίες, inert είναι παρόμοια με τη ρύθμιση aria-hidden="true". σε αντίθεση με το disabled Χαρακτηριστικό, inert δεν εφαρμόζει κανένα στυλ από προεπιλογή, αλλά είναι εύκολο να προσθέσετε το δικό σας:
form[inert] {
opacity: .2;
}Θα ακολουθήσουν κι άλλα…
Το μεγάλο είναι το styling <select> στοιχεία, κάτι που οι προγραμματιστές ήθελαν εδώ και δεκαετίες. Φαίνεται ότι θα γίνει επιτέλους πραγματικότητα κάποια στιγμή σύντομα με την εισαγωγή του selectmenu.
Αλλά αυτό είναι προς το παρόν! Οι πρόσφατες ενημερώσεις φέρνουν την πλήρη υποστήριξη του προγράμματος περιήγησης σε λειτουργίες που περιμέναμε, καθιστώντας τις πρωταρχικές για χρήση στην παραγωγή.
