ทุกคนอาจคุ้นเคยกับแบบฟอร์มรายการดรอปดาวน์ที่เลือก แต่แบบฟอร์มรายการดรอปดาวน์เริ่มต้นมักจะทำให้บางเว็บไซต์รู้สึกน่าเกลียดและยากที่จะปรับรูปแบบของการเลือกด้วย CSS ดังนั้นเว็บไซต์หลายแห่งจึงสร้างแบบฟอร์มแบบดรอปดาวน์ที่เลือกซึ่งสอดคล้องกับสไตล์เว็บไซต์มากขึ้นและมักจะใช้ JS เพื่อจำลองเอฟเฟกต์นี้
ตัวอย่างเช่น Tudou.com, Taobao Mall และ Amazon เป็นแบบดรอปดาวน์รายการที่ทำด้วย JS
ผลที่ตามมาคือการรวมกันอย่างชัดเจนด้วยรูปแบบโดยรวมของเว็บไซต์และสไตล์รายการดรอปดาวน์นั้นสวยงามมาก แต่ก็นำมาซึ่งอาการไม่พึงประสงค์บางอย่าง เนื่องจากทำกับ JS มันจะพบกับเอฟเฟกต์ที่ไม่คาดคิดมากมาย มาวิเคราะห์ข้อบกพร่องที่เกี่ยวข้องผ่านเว็บไซต์สามแห่งของผู้ทดสอบ:
กล่องเลือกหมวดหมู่การค้นหาสำหรับมันฝรั่งทำให้ฉันรู้สึกแปลก ๆ ทุกครั้งที่ฉันคลิก:
1. หลังจากคลิกรายการป๊อปอัพจะแตกต่างจากสิ่งที่คุณคาดหวัง โดยไม่รู้ตัวมันเป็นรายการดรอปดาวน์ แต่มันฝรั่งให้รายการกลางลง
2. ใช้ปุ่มขึ้น/ลงเพื่อเลือกเป็นนิสัย แต่ทั้งหน้าถูกเลื่อน
3. ด้วยความโกรธฉันไม่จำเป็นต้องปิดอีกต่อไป กดปุ่ม ESC แต่ไม่มีการตอบสนอง
4. หลังจากปิดการใช้งาน JS มันไม่สามารถใช้งานได้อย่างสมบูรณ์
ในทำนองเดียวกันห้างสรรพสินค้า Taobao ก็ดูสวยงามด้วย:
ยกเว้นจุดที่ 1 ทุกอย่างอื่นก็เหมือนมันฝรั่งที่มีปัญหาการเข้าถึงและความพร้อมใช้งาน
โซลูชันนั้นง่ายมากเพียงแค่ใช้กล่องเลือกดั้งเดิมเช่น Amazon:
เหตุใดจึงไม่ได้รับการสนับสนุนให้ใช้กล่องเลือกที่กำหนดเองในหน้าเว็บ
Select Box เป็นตัวควบคุมแบบโต้ตอบที่เป็นผู้ใหญ่มาก วุฒิภาวะหมายความว่าผู้ใช้ยอมรับได้ง่าย แต่วุฒิภาวะก็หมายความว่าพวกเขามีน้ำใจและมีรายละเอียดแบบโต้ตอบที่หลากหลาย ตัวอย่างเช่น: การตอบสนองต่อการดำเนินการแป้นพิมพ์เช่น PGUP/PGDN, home/end และทิศทางป๊อปอัพของรายการดรอปดาวน์สามารถปรับได้โดยอัตโนมัติในตำแหน่งที่แตกต่างกัน ฯลฯ
การใช้ JS เพื่อจำลองกล่องการเลือกต้องใช้งานและการทดสอบอย่างพิถีพิถัน แม้ว่า บริษัท ยินดีที่จะลงทุน แต่ก็ยังไม่สามารถใช้คุณสมบัติบางอย่างของการควบคุมแบบดั้งเดิมได้ ตัวอย่างเช่น: ในกล่องการเลือก Amazon ข้างต้นฉันดึงเบราว์เซอร์ไปสู่ระดับต่ำมากและสามารถขยายรายการดรอปดาวน์นอกเบราว์เซอร์ได้
สำหรับขนมหวานเล็กน้อยมันต้องใช้รายละเอียดที่ใช้งานได้จริงมากในการทำให้การโต้ตอบเสียเวลาไปมากและใช้เวลามากสำหรับโปรแกรมเมอร์ส่วนหน้า แต่มันก็ขอบคุณซึ่งแย่มาก
PS: หากต้องการใช้กล่องเลือกแบบกำหนดเองเงื่อนไขต่อไปนี้จะต้องปฏิบัติตาม:
1. บ้าเหมือน Google ยินดีที่จะใช้เวลาและทรัพยากรเป็นอย่างมาก
2. อย่างพิถีพิถันเช่นเดียวกับ Google ทำได้ดีและจำลองอย่างละเอียด
3. สมัครบนเว็บแอป
น่าเสียดายที่ในประเทศ บริษัท ที่บ้าและพิถีพิถันอย่างที่ Google หรือ Facebook ยังไม่ปรากฏ