מה חדש בטפסים ב-2022? PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

מה חדש בטפסים ב-2022?

חותמת זמן: 8 בספטמבר 2022 9:12

דפדפנים מוסיפים כל הזמן תכונות HTML, JavaScript ו-CSS חדשות. הנה כמה תוספות שימושיות לעבודה עם טפסים שאולי פספסת...

requestSubmit()

ספארי 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 בתוך ה-submit event handler אבל formdata מאפשר לך להפריד את ההיגיון. זוהי גם אלטרנטיבה לשימוש בקלט מוסתר בסימון הטופס שלך במקרים שבהם אתה שולח את הטופס "בדרך הישנה" - כלומר להסתמך על הפונקציונליות המובנית של HTML כדי לשלוח את הטופס במקום לעשות זאת עם fetch.

showPicker() עבור רכיבי קלט

showPicker() כבר נתמך מאז Chrome 99, Firefox 101, וב-Safari 16 הקרוב. עבור רכיב קלט שתכונת הסוג שלו היא תאריך, חודש, שבוע, שעה, datetime-local, צבע או קובץ, showPicker() מספק דרך פרוגרמטית להציג את ממשק המשתמש לבחירה. עבור קלט צבע וקבצים, תמיד ניתן היה להציג את הבוחר באופן תוכנתי על ידי קריאה .click על הקלט:

document.querySelector('input[type="color"]').click();

גישה זו לא עובדת על קלט תאריך, וזו הסיבה שה-API החדש הזה נוסף. .showPicker() יעבוד גם עם קלט של צבע וקבצים אבל אין יתרון אמיתי לשימוש בו .click().

מה חדש בטפסים ב-2022?

תכונה אינרטית

תמיד ניתן היה להשבית מספר כניסות בו-זמנית על ידי עטיפתם ב-HTML fieldset והשבתת ה fieldset:

אינרט היא תכונת HTML חדשה. זה לא מיועד רק לטפסים, אבל טפסים הם בהחלט מקרה שימוש מרכזי. לא כמו ה disabled תְכוּנָה, inert ניתן להחיל על א form האלמנט עצמו. כל מה שנמצא בטופס יהיה לא ניתן למיקוד ולא לחיצה. כשזה מגיע לטכנולוגיות מסייעות, inert דומה להגדרה aria-hidden="true". לא כמו ה disabled תְכוּנָה, inert כברירת מחדל, לא מיושם סטיילינג, אבל קל להוסיף עיצוב משלך:

form[inert] {
  opacity: .2;
}

יש עוד לבוא…

הגדול הוא סטיילינג <select> אלמנטים, משהו שמפתחים רצו במשך עשרות שנים. נראה שזה סוף סוף יהפוך למציאות מתישהו בקרוב עם הצגתו של selectmenu.

אבל זהו לבינתיים! העדכונים האחרונים מביאים תמיכה מלאה בדפדפן ליצירת תכונות שחיכינו להן, מה שהופך אותן למומלצות לשימוש בייצור.

בול זמן:

עוד מ טריקים של CSS