เคอร์เซอร์และตัวชี้

ในอุปกรณ์ที่ไม่ใช่หน้าจอสัมผัส เคอร์เซอร์เป็นวิธีสำคัญที่ช่วยให้ผู้ใช้ทราบว่ากำลังโต้ตอบกับอะไร นอกจากนี้ คุณยังให้คำแนะนำที่เป็นประโยชน์เกี่ยวกับวิธีโต้ตอบกับองค์ประกอบ หรือวิธีที่การเคลื่อนไหวด้วยแทร็กแพดหรือเมาส์จะส่งผลต่อเว็บไซต์ได้ด้วย

เคอร์เซอร์

เบราว์เซอร์จะจัดการ Use Case ทั่วไปบางอย่างสำหรับเคอร์เซอร์โดยอัตโนมัติ

หากคุณกำลังอ่านข้อความนี้ในอุปกรณ์ที่มีเคอร์เซอร์ ให้สำรวจหน้าเว็บ คุณอาจไม่เคยสังเกตว่าเคอร์เซอร์เปลี่ยนไปอย่างไรมาก่อน แต่โปรดสังเกตคำแนะนำที่เคอร์เซอร์แสดง เมื่อวางเคอร์เซอร์เหนือข้อความ เคอร์เซอร์จะเปลี่ยนเป็น I-beam สำหรับการเลือก ซึ่งแสดงว่าคุณเลือกข้อความได้ หากวางเมาส์เหนือลิงก์ เคอร์เซอร์จะเปลี่ยนเป็นรูปมือที่ชี้ด้วยนิ้วชี้ ซึ่งแสดงว่าคุณสามารถดำเนินการได้ ส่วนที่อื่นๆ จะมีเคอร์เซอร์เริ่มต้น ซึ่งมักจะเป็นลูกศร

เมื่อสร้างเว็บไซต์แบบอินเทอร์แอกทีฟมากขึ้น คุณอาจต้องการปรับแต่งเคอร์เซอร์เพื่อให้ผู้ใช้เข้าใจการโต้ตอบได้ง่ายขึ้น

เบราว์เซอร์รองรับคีย์เวิร์ดหลายรายการสำหรับพร็อพเพอร์ตี้เคอร์เซอร์ ซึ่งให้คำแนะนำสำหรับการลาก ปรับขนาด เลือก และอื่นๆ

หากเคอร์เซอร์ที่รองรับไม่มีการสื่อสารการโต้ตอบขององค์ประกอบ คุณก็สามารถระบุรูปภาพ SVG หรือ PNG เพื่อใช้เป็นเคอร์เซอร์ได้เช่นกัน

เครื่องหมายตก

เครื่องหมายแทรกใช้เพื่อแสดงตำแหน่งของคุณในข้อความที่แก้ไขได้ ซึ่งจะแตกต่างจากเคอร์เซอร์เนื่องจากไม่ได้ติดตามเมาส์ คุณเปลี่ยนสีได้ด้วย caret-color

การตอบสนองต่ออินพุตของเคอร์เซอร์ของผู้ใช้

ผู้ใช้ที่มีเมาส์หรือแทร็กแพดจะโต้ตอบกับจุดที่แม่นยำกว่าบนหน้าจอได้มากกว่าผู้ใช้ที่มีหน้าจอสัมผัส หากออกแบบมาเพื่อความแม่นยำของเมาส์เท่านั้น ผู้ใช้ที่มีหน้าจอสัมผัสหรือมีปัญหาด้านการควบคุมกล้ามเนื้อมัดเล็กอาจโต้ตอบกับหน้าเว็บของคุณไม่ได้ตามที่ต้องการ

ปัญหาที่พบบ่อย ได้แก่ ปุ่มที่มีขนาดเล็กเกินไปหรือองค์ประกอบแบบอินเทอร์แอกทีฟที่อยู่ใกล้กันเกินไป ซึ่งทำให้ผู้ใช้โต้ตอบกับองค์ประกอบที่ถูกต้องได้ยาก

การตรวจสอบว่าปุ่มและเป้าหมายแบบอินเทอร์แอกทีฟอื่นๆ มีขนาดใหญ่เพียงพอเป็นขั้นตอนสำคัญในการดูแลให้เว็บไซต์เข้าถึงได้ quirrel ยังปรับแต่งสไตล์ตามความแม่นยำของอุปกรณ์อินพุตของผู้ใช้ได้ด้วยการค้นหาสื่อ pointer และ any-pointer

pointerฟีเจอร์สื่อหมายถึงอุปกรณ์ป้อนข้อมูลหลักของผู้ใช้ ส่วน any-pointer หมายถึงอุปกรณ์ป้อนข้อมูลทั้งหมด คุณสามารถจับคู่อุปกรณ์ เช่น เมาส์ กับ fine และอุปกรณ์ เช่น หน้าจอสัมผัส กับ coarse ค่า none แสดงว่าผู้ใช้ไม่ได้ใช้อุปกรณ์ป้อนข้อมูลที่มีเคอร์เซอร์

เหตุการณ์ของเคอร์เซอร์และเหตุการณ์การสัมผัส

ปิดใช้ท่าทางสัมผัสบนหน้าจอสัมผัสบางอย่าง

เมื่อใช้หน้าจอสัมผัส เบราว์เซอร์จะจัดการท่าทางสัมผัสทั่วไปบางอย่าง เช่น การใช้ 2 นิ้วแตะหน้าจอแล้วกางนิ้วออกมักจะเป็นการซูมเข้าในเว็บไซต์ แม้ว่าคุณจะไม่ต้องใช้ลักษณะการทำงานเหล่านั้นในเว็บไซต์ แต่คุณอาจต้องการปิดใช้หรือลบล้างลักษณะการทำงานดังกล่าวในบางกรณี

หากต้องการเลือกไม่ให้เบราว์เซอร์จัดการการทำงานบางอย่าง ให้ระบุการทำงานที่คุณต้องการให้องค์ประกอบจัดการ pan-x และ pan-y จะเปิดใช้ท่าทางสัมผัสการแพนกล้องด้วยนิ้วเดียว คุณเปิดใช้ได้พร้อมกับ pinch-zoom ซึ่งจะช่วยให้ซูมและเลื่อนได้ด้วยหลายนิ้ว

คีย์เวิร์ด manipulation มีค่าเท่ากับ pan-x pan-y pinch-zoom manipulation ไม่รวมพฤติกรรมการสัมผัสอื่นๆ ที่ต้องสัมผัสหลายครั้งในระยะเวลาสั้นๆ เช่น การแตะสองครั้งเพื่อซูม

หลังจากปิดใช้การจัดการการดำเนินการของเบราว์เซอร์โดยการยกเว้นจากการดำเนินการ touch-action แล้ว คุณจะตั้งค่าเหตุการณ์ของเคอร์เซอร์สำหรับการดำเนินการนั้นได้

ปิดใช้เหตุการณ์และการดำเนินการทั้งหมด

ในบางกรณี คุณอาจต้องการระบุว่าองค์ประกอบหนึ่งๆ ไม่ใช่แบบอินเทอร์แอกทีฟ เช่น การตั้งค่า pointer-events: none ในปุ่มจะทำให้คุณคลิกปุ่มไม่ได้ หรือแม้แต่ทริกเกอร์สถานะวางเมาส์เหนือ

ทดสอบความเข้าใจ