เป็นเวลานานแล้ว คุณต้องเลือกใช้ไลบรารีวิดเจ็ตที่กำหนดเองหรือการแฮ็กเพื่อแสดงเครื่องมือเลือกวันที่ ตอนนี้แพลตฟอร์มเว็บมาพร้อมกับเมธอด HTMLInputElement showPicker()
ซึ่งเป็นวิธี Canonical ในการแสดงเครื่องมือเลือกเบราว์เซอร์ ไม่เพียงแต่สำหรับวันที่เท่านั้น แต่ยังรวมถึงเวลา สี และไฟล์ด้วย
ที่มา
คำขอที่พบบ่อยที่เราได้รับจากนักพัฒนาเว็บคือ
ฉันจะแสดงเครื่องมือเลือกสำหรับการควบคุม เช่น วันที่
Stack Overflow
โดยอัตโนมัติได้อย่างไร
คำตอบปัจจุบันไม่ใช่คำตอบที่ดี เนื่องจากต้องอาศัยไลบรารีภายนอก การแฮ็ก CSS หรือลักษณะการทำงานที่เจาะจงของเบราว์เซอร์ เช่น การจำลองการโต้ตอบของผู้ใช้กับ click()
เรายินดีที่จะแจ้งให้ทราบว่าเราจะยกเลิกช่วงเวลาดังกล่าวทันทีที่แพลตฟอร์มเว็บเปิดตัววิธี Canonical เพื่อแสดงเครื่องมือเลือกเบราว์เซอร์สำหรับองค์ประกอบ <input>
ที่มีประเภทดังนี้ "date"
, "month"
, "week"
, "time"
, "datetime-local"
, "color"
และ "file"
และจะใช้กับองค์ประกอบ <input>
ที่มีคำแนะนำจาก <datalist>
หรือ "autocomplete"
ซึ่งเราจะพูดถึงในบทความนี้ด้วย
วิธีแสดงเครื่องมือเลือก
การเรียก showPicker()
ในองค์ประกอบ <input>
จะแสดงเครื่องมือเลือกเบราว์เซอร์แก่ผู้ใช้ โดยจะต้องเรียกใช้เพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้ เช่น ท่าทางสัมผัสการแตะหรือการคลิกเมาส์ มิเช่นนั้น จะดำเนินการไม่สำเร็จโดยมีข้อยกเว้น NotAllowedError
ด้วยเหตุผลด้านความปลอดภัย URL จะแสดงผลข้อยกเว้น 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()
อาจมีประโยชน์ และเราอาจพิจารณาเพิ่มหากนักพัฒนาเว็บขอข้อมูลเหล่านั้น - เราเพิ่มนโยบายสิทธิ์ได้ซึ่งอนุญาตให้ iframe แบบข้ามต้นทางแสดงเครื่องมือเลือกเบราว์เซอร์เมื่อเชนระดับบนสุดอนุญาต
ความคิดเห็น
ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบข้อมูลเกี่ยวกับประสบการณ์การใช้งาน showPicker()
ของคุณ
บอกให้เราทราบเกี่ยวกับการออกแบบ
มีบางอย่างเกี่ยวกับ showPicker()
ที่ไม่เป็นไปตามที่คุณคาดไว้ไหม หรือมีวิธีหรือพร็อพเพอร์ตี้ที่คุณจำเป็นต้องใช้เพื่อนำแนวคิดไปปฏิบัติจริงไหม
หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลการรักษาความปลอดภัย
- ให้ส่งปัญหาข้อมูลจำเพาะในที่เก็บ GitHub สำหรับ WHATWG หรือเพิ่มความเห็นของคุณเกี่ยวกับปัญหาที่มีอยู่
มีปัญหาเกี่ยวกับการติดตั้งใช้งานใช่ไหม
คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจากข้อกำหนด
- รายงานข้อบกพร่องที่ https://new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุดเท่าที่จะทำได้ และคำแนะนำง่ายๆ ในการทำซ้ำ Glitch เหมาะสำหรับการแชร์คำแนะนำที่ทำซ้ำได้ง่ายและรวดเร็ว
แสดงการสนับสนุน
คุณกำลังวางแผนที่จะใช้ showPicker()
ใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนดังกล่าวมีความสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev และบอกเราว่าคุณใช้งานฟีเจอร์นี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- เอกสารประกอบ MN
- คำอธิบาย WHATWG
- ข้อมูลจำเพาะของ WHATWG
- การตรวจสอบ TAG
- การสาธิต | แหล่งที่มาของข้อมูลประชากร
- ข้อบกพร่องของ Chromium
- รายการ ChromeStatus.com
กิตติกรรมประกาศ
ขอขอบคุณ Joe Medley ที่อ่านบทความนี้ รูปภาพปฏิทินโดย Eric Rothermel ใน Unsplash