برای مدت طولانی، مجبور بودید به کتابخانه‌های ویجت سفارشی یا هک‌ها متوسل شوید تا انتخابگر تاریخ را نشان دهید. پلتفرم وب اکنون با روش HTMLInputElement showPicker() عرضه می شود، روشی متعارف برای نشان دادن انتخابگر مرورگر نه تنها برای تاریخ، بلکه زمان، رنگ و فایل ها.
پس زمینه
درخواست مکرری که از توسعه دهندگان وب می شنویم این است:
چگونه برنامه ریزی کنم
سرریز پشته
انتخابگر برای کنترل هایی مانند تاریخ نشان داده شود؟
پاسخ های فعلی عالی نیستند. آنها به کتابخانه های خارجی، هک های CSS یا رفتارهای خاص مرورگر مانند شبیه سازی تعامل کاربر با click() متکی هستند.
خوشحالم که به اشتراک بگذارم که آن روزها به زودی به پایان خواهند رسید، زیرا پلتفرم وب روشی متعارف برای نشان دادن انتخابگر مرورگر برای عناصر <input> با این انواع معرفی می‌کند: "date" ، "month" ، "week" ، "time" , "datetime-local" , "color" و "file" . همچنین برای عناصر <input> با پیشنهادات ارائه شده توسط <datalist> یا "autocomplete" که در این مقاله به آنها نیز خواهیم پرداخت.
نحوه نمایش یک جمع کننده
فراخوانی showPicker() در عنصر <input> یک انتخابگر مرورگر را به کاربر نشان می دهد. باید در پاسخ به یک حرکت کاربر مانند حرکت لمسی یا کلیک ماوس فراخوانی شود. در غیر این صورت با یک استثنا NotAllowedError شکست خواهد خورد. به دلایل امنیتی، هنگامی که در یک iframe متقاطع فراخوانی شود، یک استثنا SecurityError ایجاد می کند.
انتخابگر مرورگر زمانی نشان داده می‌شود که عنصر <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()مفید باشد، و اگر توسعه‌دهندگان وب درخواست کنند، می‌توانیم آن را اضافه کنیم. - ما می‌توانیم یک خط‌مشی مجوز اضافه کنیم که به iframeهای متقاطع اجازه می‌دهد انتخاب‌کننده‌های مرورگر را در زمانی که زنجیره اصلی آنها اجازه انجام این کار را می‌دهد، نشان دهند.
بازخورد
تیم Chrome و انجمن استانداردهای وب می‌خواهند درباره تجربیات شما با showPicker() بشنوند.
در مورد طراحی به ما بگویید
آیا چیزی در مورد showPicker() وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ یا آیا روش ها یا ویژگی هایی وجود دارد که برای اجرای ایده خود به آنها نیاز دارید؟ سوال یا نظری در مورد مدل امنیتی دارید؟
- یک مشکل مشخصات را در مخزن WHATWG GitHub ثبت کنید یا افکار خود را به یک مشکل موجود اضافه کنید.
مشکل در اجرا؟
آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یا اجرا با مشخصات متفاوت است؟
- یک اشکال را در https://new.crbug.com ثبت کنید. حتماً تا جایی که می توانید جزئیات و دستورالعمل های ساده را برای بازتولید درج کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.
نشان دادن پشتیبانی
آیا قصد دارید از showPicker() استفاده کنید؟ پشتیبانی عمومی شما به تیم Chrome کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.
یک توییت به @ChromiumDev ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می کنید.
لینک های مفید
- مستندات MDN
- توضیح دهنده WHATWG
- مشخصات WHATWG
- بررسی تگ
- نسخه ی نمایشی | منبع نسخه ی نمایشی
- اشکال کروم
- ورودی ChromeStatus.com
قدردانی ها
با تشکر از جو مدلی برای بررسی این مقاله. عکس تقویم توسط اریک روترمل در Unsplash .