คลาส FocusManager
Singleton ต่อหน้าเว็บที่จัดการโฟกัส Blockly ใน IFocusableTree อย่างน้อย 1 รายการ และซิงค์โฟกัสนี้กับ DOM แบบสองทิศทาง
ผู้โทรที่ต้องการเปลี่ยนโฟกัสอินพุตอย่างชัดเจนสำหรับคอมโพเนนต์ Blockly บางรายการในหน้าเว็บควรใช้ฟังก์ชันโฟกัสในเครื่องมือจัดการนี้
ผู้จัดการมีหน้าที่จัดการเหตุการณ์โฟกัสจาก DOM (ซึ่งอาจเกิดขึ้นจากการที่ผู้ใช้คลิกองค์ประกอบในหน้าเว็บ) และตรวจสอบว่ามีการทำเครื่องหมาย IFocusableNode ที่เกี่ยวข้องอย่างชัดเจนว่ามีการไฮไลต์ที่ใช้งานอยู่/ไม่ได้ใช้งานในลักษณะเดียวกับที่แสดงด้วยการเรียก focusNode()
ลายเซ็น:
export declare class FocusManager
ผู้ผลิต
| ผู้ผลิต | คีย์ตัวปรับแต่ง | คำอธิบาย |
|---|---|---|
| (constructor)(addGlobalEventListener) | สร้างอินสแตนซ์ใหม่ของคลาส FocusManager |
พร็อพเพอร์ตี้
| พร็อพเพอร์ตี้ | คีย์ตัวปรับแต่ง | ประเภท | คำอธิบาย |
|---|---|---|---|
| ACTIVE_FOCUS_NODE_CSS_CLASS_NAME |
|
(ไม่ได้ประกาศ) | คลาส CSS ที่กำหนดให้กับองค์ประกอบ IFocusableNode ซึ่งปัจจุบันมี DOM และโฟกัส Blockly ที่ใช้งานอยู่ ไม่ควรใช้โดยตรง แต่ให้ใช้ FocusManager เพื่อให้แน่ใจว่าโหนดมีโฟกัสที่ใช้งานอยู่ (ไม่ว่าจะโดยอัตโนมัติผ่านโฟกัส DOM หรือด้วยตนเองผ่านเมธอด focus* ต่างๆ ที่คลาสนี้มีให้) ขอแนะนำว่าไม่ควรค้นหาโดยใช้ชื่อคลาสนี้เช่นกัน แต่ให้ใช้เมธอดของ FocusableTreeTraverser หรือ IFocusableTree เพื่อค้นหาโหนดที่ต้องการแทน |
| PASSIVE_FOCUS_NODE_CSS_CLASS_NAME |
|
(ไม่ได้ประกาศ) | คลาส CSS ที่กำหนดให้กับองค์ประกอบ IFocusableNode ซึ่งปัจจุบันมีโฟกัสแบบพาสซีฟ (กล่าวคือ เป็นโหนดล่าสุดในแผนผังที่เกี่ยวข้องซึ่งมีโฟกัสที่ใช้งานอยู่ ดู ACTIVE_FOCUS_NODE_CSS_CLASS_NAME และจะได้รับโฟกัสที่ใช้งานอยู่อีกครั้งหากมีการขอให้แผนผังโดยรอบกลายเป็นโฟกัส เช่น การใช้ focusTree ด้านล่าง) ดู ACTIVE_FOCUS_NODE_CSS_CLASS_NAME เพื่อดูข้อควรระวังและข้อจำกัดเกี่ยวกับการใช้ค่าคงที่นี้โดยตรง (โดยทั่วไปไม่ควรใช้) |
เมธอด
| วิธีการ | คีย์ตัวปรับแต่ง | คำอธิบาย |
|---|---|---|
| ephemeralFocusTaken() | ||
| focusNode(focusableNode) | โฟกัสอินพุต DOM บนโหนดที่ระบุ และทำเครื่องหมายว่ามีการโฟกัสที่ใช้งานอยู่ ระบบจะอัปเดตโหนดที่โฟกัสก่อนหน้านี้ให้เป็นไฮไลต์แบบพาสซีฟ (หากอยู่ในโฟกัสทรีอื่น) หรือเบลอ (หากอยู่ในโฟกัสทรีเดียวกัน) **สำคัญ**: หากโฟกัสโหนดที่ระบุไม่ได้ (เช่น เมธอด canBeFocused() แสดงผลเป็นเท็จ) ระบบจะไม่สนใจโหนดดังกล่าวและสถานะโฟกัสที่มีอยู่จะยังคงไม่เปลี่ยนแปลง โปรดทราบว่าการดำเนินการนี้อาจอัปเดต tabindex ขององค์ประกอบของโหนดที่ระบุเพื่อให้โปรแกรมอ่านหน้าจออ่านได้อย่างถูกต้องขณะโฟกัส |
|
| focusTree(focusableTree) | โฟกัส IFocusableTree ที่เฉพาะเจาะจง ซึ่งหมายถึงการคืนค่าโฟกัสที่ใช้งานอยู่ไปยังโหนดที่โฟกัสแบบพาสซีฟของทรี หรือโฟกัสโหนดรูทของทรี โปรดทราบว่าหากทรีที่ระบุมีโหนดที่โฟกัสอยู่แล้ว การดำเนินการนี้จะไม่เปลี่ยนแปลงโฟกัสที่มีอยู่ (เว้นแต่โหนดนั้นมีโฟกัสแบบพาสซีฟ จากนั้นระบบจะคืนค่าเป็นโฟกัสที่ใช้งานอยู่) ดูรายละเอียดเกี่ยวกับผลกระทบที่มีต่อโหนดอื่นๆ ได้ที่ getFocusedNode |
|
| getFocusedNode() | แสดงผล IFocusableNode ปัจจุบันที่มีโฟกัส (ซึ่งเชื่อมโยงกับ IFocusableTree ที่โฟกัสเสมอ) หรือ null หากไม่มี โปรดทราบว่าฟังก์ชันนี้จะรักษาความเท่าเทียมกับ IFocusableTree.getFocusedNode() กล่าวคือ หากทรีมีโฟกัส แต่ไม่มีองค์ประกอบย่อยที่ไม่ใช่รูทใดๆ ที่มีโฟกัส ฟังก์ชันนี้จะแสดงผลเป็น null แต่ getFocusedTree() จะไม่แสดงผลเป็น null นอกจากนี้ โปรดทราบว่าหากมีการจับโฟกัสชั่วคราวในขณะนี้ (เช่น ใช้ takeEphemeralFocus) โหนดที่แสดงผลที่นี่อาจไม่มีโฟกัส DOM ในขณะนี้ |
|
| getFocusedTree() | แสดงผล IFocusableTree ปัจจุบันที่มีโฟกัส หรือ null หากไม่มี นอกจากนี้ โปรดทราบว่าหากมีการจับโฟกัสชั่วคราวในขณะนี้ (เช่น ใช้ takeEphemeralFocus) ต้นไม้ที่แสดงผลที่นี่อาจไม่มีโฟกัส DOM ในขณะนี้ |
|
| getFocusManager() | static |
แสดงผล FocusManager ระดับหน้าเว็บ ระบบรับประกันว่าอินสแตนซ์ที่ส่งคืนจะไม่เปลี่ยนแปลงในการเรียกฟังก์ชัน แต่จะเปลี่ยนแปลงเมื่อโหลดหน้าเว็บ |
| isRegistered(tree) | แสดงว่ามีการลงทะเบียนแผนผังที่ระบุไว้ในเครื่องมือจัดการนี้แล้วหรือไม่โดยใช้ registerTree และยังไม่ได้ยกเลิกการลงทะเบียนโดยใช้ unregisterTree | |
| registerTree(tree, rootShouldBeAutoTabbable) | ลงทะเบียน IFocusableTree ใหม่สำหรับการจัดการโฟกัสอัตโนมัติ หากปัจจุบันทรีมีองค์ประกอบที่มีโฟกัส DOM การดำเนินการนี้จะไม่ส่งผลต่อสถานะภายในในเครื่องมือจัดการนี้จนกว่าโฟกัสจะเปลี่ยนไปเป็นองค์ประกอบ/โหนดใหม่ที่ตอนนี้มีการตรวจสอบ ฟังก์ชันนี้จะแสดงข้อผิดพลาดหากมีการลงทะเบียนทรีที่ระบุไว้ในเครื่องมือจัดการนี้อยู่แล้ว ใช้ isRegistered เพื่อตรวจสอบในกรณีที่ไม่แน่ใจว่าได้ลงทะเบียนทรีหรือยัง คุณปรับแต่งการลงทะเบียนของแผนภูมิเพื่อกำหนดค่าการหยุดแท็บอัตโนมัติได้ ซึ่งจะช่วยให้ผู้ใช้สามารถไปยังรูทของทรีได้โดยใช้แป้น Tab แต่จะทำได้ก็ต่อเมื่อทรีไม่ได้มีโฟกัสที่ใช้งานอยู่ หากปิดใช้ฟังก์ชันนี้ ระบบจะทำให้รูทของทรีโฟกัสได้โดยอัตโนมัติ (แต่กด Tab ไม่ได้) เมื่อโฟกัสเป็นครั้งแรกในลักษณะเดียวกับโหนดอื่นๆ ที่โฟกัสได้ |
|
| takeEphemeralFocus(focusableElement) | จับโฟกัสสำหรับองค์ประกอบที่เฉพาะเจาะจงชั่วคราวจนกว่าจะมีการเรียกใช้แลมบ์ดาที่ส่งคืน ซึ่งคาดว่าจะมีประโยชน์อย่างยิ่งสําหรับโฟลว์ UI ชั่วคราว เช่น กล่องโต้ตอบ สำคัญ: ต้องเรียกใช้ Lambda ที่ส่งคืน ไม่เช่นนั้นโฟกัสอัตโนมัติจะใช้งานไม่ได้ในส่วนใดๆ ของหน้าอีกต่อไป ขอแนะนำอย่างยิ่งให้เชื่อมโยงการเรียกใช้ Lambda กับการปิด UI ที่เกี่ยวข้อง เพื่อให้หากมีการเปลี่ยนอินพุตด้วยตนเองเป็นองค์ประกอบภายนอก UI ชั่วคราว UI ควรปิดและระบบจะคืนค่าอินพุตอัตโนมัติ โปรดทราบว่าต้องเรียกใช้ Lambda นี้เพียงครั้งเดียวเท่านั้น และการเรียกใช้ครั้งต่อๆ ไปจะทำให้เกิดข้อผิดพลาด โปรดทราบว่าผู้จัดการจะติดตามสัญญาณอินพุต DOM ต่อไปแม้ว่าโฟกัสชั่วคราวจะทำงานอยู่ แต่จะไม่เปลี่ยนสถานะโหนดจริงจนกว่าจะเรียกใช้ Lambda ที่ส่งคืน นอกจากนี้ บริบทโฟกัสชั่วคราวจะใช้งานได้ครั้งละ 1 รายการเท่านั้น (การพยายามเปิดใช้งานมากกว่า 1 รายการพร้อมกันจะทำให้เกิดข้อผิดพลาด) |
|
| unregisterTree(tree) | ยกเลิกการลงทะเบียน IFocusableTree จากการจัดการโฟกัสอัตโนมัติ หากทรีมีโหนดที่โฟกัสก่อนหน้า ระบบจะนำไฮไลต์ของโหนดนั้นออก ฟังก์ชันนี้จะไม่เปลี่ยนโฟกัส DOM ฟังก์ชันนี้จะแสดงข้อผิดพลาดหากไม่ได้ลงทะเบียนทรีที่ระบุไว้ในเครื่องมือจัดการนี้ ฟังก์ชันนี้จะรีเซ็ต tabindex ขององค์ประกอบรากของแผนผังหากมีการลงทะเบียนแผนผังด้วยการจัดการแท็บอัตโนมัติ |