במשך זמן רב, כדי להציג בורר תאריכים, היה צריך להשתמש בספריות ווידג'טים בהתאמה אישית או בהאקים. פלטפורמת האינטרנט כוללת עכשיו את השיטה showPicker() של HTMLInputElement, דרך קנונית להצגת בורר בדפדפן לא רק לתאריכים, אלא גם לשעה, לצבע ולקבצים.
רקע
בקשה נפוצה שאנחנו מקבלים ממפתחי אתרים היא:
איך מציגים באופן פרוגרמטי
Stack Overflow
בורר לפקדים כמו תאריך?
התשובות הקיימות לא הכי טובות. הן מסתמכות על ספריות חיצוניות, על פריצות ל-CSS או על התנהגויות ספציפיות של דפדפנים, כמו הדמיה של אינטראקציה של משתמש עם click().
יש לי חדשות טובות: בקרוב נציג בפלטפורמת האינטרנט דרך קנונית להצגת בורר בדפדפן לרכיבי <input> מהסוגים הבאים: "date", "month", "week", "time", "datetime-local", "color" ו-"file". הוא יפעל גם לאלמנטי <input> עם הצעות שמבוססות על <datalist> או "autocomplete", שגם להם נסביר במאמר הזה.
איך מציגים בורר
קריאה ל-showPicker() ברכיב <input> מציגה למשתמש בורר דפדפנים. צריך לקרוא ל-onTap בתגובה לתנועת משתמש, כמו תנועת מגע או לחיצה על העכבר. אחרת, הפונקציה תיכשל עם חריגה מסוג NotAllowedError.
מטעמי אבטחה, הקריאה תגרום להשלכת חריגה מסוג SecurityError כשהיא תתבצע ב-iframe חוצה-מקורות.
בורר דפדפנים מוצג כשהרכיב <input> הוא אחד מהסוגים הבאים:
"date", "month", "week", "time", "datetime-local", "color" או
"file".
הדוגמה הבאה מראה איך לפתוח חלונית לבחירת תאריך בדפדפן.
<input type="date">
<button>Show the date picker</button>
<script>
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use external library when this fails.
}
});
</script>
אפשר גם לאכלס מראש בורר בדפדפן בפריטים מ-<datalist> או מ-"autocomplete".
הדוגמה הבאה מראה איך לפתוח בורר דפדפנים באמצעות <datalist>.
<datalist id="ice-cream-flavors">
<option value="Chocolate"> </option>
<option value="Coconut"> </option>
<option value="Mint"> </option>
<option value="Strawberry"> </option>
<option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>
<script>
const button = document.querySelector("button");
const iceCreamFlavorsInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
iceCreamFlavorsInput.showPicker();
// A picker containing some ice cream flavors is shown.
} catch (error) {
// Use external library when this fails.
}
});
</script>
זיהוי תכונות
כדי לבדוק אם יש תמיכה ב-showPicker(), משתמשים ב-:
if ('showPicker' in HTMLInputElement.prototype) {
// showPicker() is supported.
}
הדגמה (דמו)
גרסת הדגמה זמינה בכתובת https://show-picker.glitch.me/demo.html, שבה תוכלו לשחק עם כל הבוררים הנתמכים בדפדפן.
תמיכה בדפדפנים
showPicker() זמין ב-Chrome 99 ואילך.
המאמרים הבאים
נכון למועד כתיבת המאמר, showPicker() הוא נכס חדש בפלטפורמת האינטרנט. יכול להיות שנצטרך לעבוד עוד על התכונה הזו בעתיד:
- יכול להיות שנוסיף
showPicker()דומה לאלמנט<select>בעתיד, אם מפתחי אתרים יבקש זאת. - יכול להיות ש-
closePicker()שימושי, ואנחנו נוכל לשקול להוסיף אותו אם מפתחי אתרים יבקש זאת. - אפשר להוסיף מדיניות הרשאות שמאפשרת ל-iframes ממקורות שונים להציג בוררי דפדפנים כששרשרת ההורה שלהם מאפשרת להם לעשות זאת.
משוב
צוות Chrome וקהילת תקני האינטרנט רוצים לשמוע על החוויות שלכם עם showPicker().
נשמח לשמוע על העיצוב
האם יש משהו ב-showPicker() שלא פועל כצפוי? או שאולי חסרות שיטות או מאפיינים שדרושים לכם כדי להטמיע את הרעיון?
יש לך שאלה או הערה לגבי מודל האבטחה?
- אפשר לדווח על בעיה במפרט במאגר GitHub של WHATWG או להוסיף את המחשבות שלכם לבעיה קיימת.
בעיה בהטמעה?
מצאתם באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?
- שולחים דיווח על באג בכתובת https://new.crbug.com. חשוב לכלול כמה שיותר פרטים והוראות פשוטות לשחזור הבעיה. Glitch הוא כלי מצוין לשיתוף שחזור מהיר וקל של באגים.
פנייה לתמיכה
האם בכוונתך להשתמש ב-showPicker()? התמיכה הציבורית שלכם עוזרת לצוות Chrome לתעדף תכונות ומראה לספקי דפדפנים אחרים עד כמה חשוב לתמוך בהם.
אפשר לשלוח ציוץ אל @ChromiumDev ולספר לנו איפה ואיך אתם משתמשים בו.
קישורים שימושיים
- מסמכי התיעוד של MDN
- הסבר על WHATWG
- מפרט WHATWG
- בדיקת התג
- הדגמה | מקור ההדגמה
- באג ב-Chromium
- הרשומה ב-ChromeStatus.com
תודות
תודה ל-Joe Medley על בדיקת המאמר הזה. תמונת הרקע של יומן Google היא צילום של Eric Rothermel ב-Unsplash.