สำหรับประสบการณ์การใช้งานที่ดีการเข้าถึงและความพร้อมใช้งานของเว็บไซต์/เว็บแอปรวมถึงฟังก์ชั่นการใช้งานมีความสำคัญ
เมื่อเว็บไซต์ของเราทำงานได้ดี/ประสบการณ์ดีผู้ใช้ไม่ทราบ แต่พวกเขาจะรู้สึกได้อย่างแน่นอนเมื่อเราทำได้ไม่ดี ส่วนสำคัญของความพร้อมใช้งานของแอปพลิเคชันและการเข้าถึงคือการประมวลผลโฟกัสอินพุต แต่นี่เป็นอีกจุดหนึ่งที่นักพัฒนามักมองข้าม
ตัวอย่างการจัดการโฟกัสที่ไม่ดี: เปิดหน้าต่างหลังจากคลิกลิงก์ แต่ไม่ได้โฟกัสเคอร์เซอร์เข้ากับองค์ประกอบใด ๆ ในหน้าต่าง ยิ่งแย่ลง: มุ่งเน้นไปที่องค์ประกอบในหน้าต่างโมดัล แต่โฟกัสจะไม่กลับมาหลังจากปิด เป็นการดีที่การอ้างอิงจะถูกบันทึกเมื่อลิงค์ถูกเรียกใช้และเคอร์เซอร์จะเน้นไปที่หน้าต่างใหม่และย้ายเคอร์เซอร์กลับเมื่อหน้าต่างปิด
แต่ถ้าคุณไม่ทราบว่าเคอร์เซอร์อินพุตอยู่ในขณะนี้ผ่านทางเอกสารคุณสมบัติการใช้งานเราสามารถรับองค์ประกอบที่ได้รับการโฟกัสในเอกสารปัจจุบัน!
จาวาสคริปต์
เป็นเรื่องง่ายที่จะใช้งาน Document.activelement เพื่อค้นหาองค์ประกอบที่เลือกในปัจจุบัน:
การคัดลอกรหัสมีดังนี้:
var focususentElement = document.active lement;
/* ตัวอย่างตัวอย่าง:
var triggerElement = document.activeElement;
mymodal = ใหม่ mymodal ({
Onopen: function () {
this.container.focus ();
-
onClose: function () {
triggerElement.focus ();
-
-
-
คุณสมบัตินี้ไม่เพียง แต่มีอยู่ในองค์ประกอบอินพุตปกติ แต่ยังรวมถึงฟิลด์ฟอร์มหรือ <a> แท็กลิงก์เท่านั้น แต่ยังมีองค์ประกอบใด ๆ ที่มีชุดแอตทริบิวต์ TabIndex
เหตุผลที่ฉันชอบ Document.activeElement คือคุณไม่จำเป็นต้องใช้การฟังเหตุการณ์หรือผู้ฟังที่ได้รับมอบหมายเพื่อติดตามองค์ประกอบและรับโฟกัส - คุณสามารถรับคุณสมบัตินี้ได้ตลอดเวลา แน่นอนก่อนที่จะใช้คุณสมบัติดังกล่าวคุณควรทำการทดสอบมากมาย - ไม่ว่าจะมีข้อบกพร่องใด ๆ ในเบราว์เซอร์ข้ามหรือเงื่อนไขการแข่งขัน โดยรวมแล้วฉันพอใจกับมันมากและพบว่ามันเชื่อถือได้มาก!