ย้ายโฟกัสหลังการดำเนินการ
ส่งโฟกัสไปยังจุดที่ผู้ใช้ต้องการใช้งานต่อ
ย้ายโฟกัสหลังการดำเนินการ เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
โฟกัสคือตัวชี้ตำแหน่งของผู้ใช้
สำหรับผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ โฟกัส คือตำแหน่งที่ผู้ใช้อยู่บนหน้า หลังจากการทำงานหนึ่ง ๆ คุณเป็นผู้กำหนดว่าตำแหน่งนั้นจะไปอยู่ที่ใดต่อ
เหตุใดจึงต้องย้ายโฟกัส
เมื่อปุ่มแสดงเนื้อหาใหม่ โฟกัสมักยังอยู่ที่เดิม ทำให้ผู้ใช้ไม่รู้ว่ามีอะไรเปลี่ยนแปลง การย้ายโฟกัส จะนำผู้ใช้ไปยังผลลัพธ์
เมธอด focus
คุณย้ายโฟกัสใน JavaScript ได้โดยเรียกใช้ element.focus() กับเป้าหมายที่ต้องการให้ผู้ใช้ไปอยู่ต่อ
document.getElementById('results').focus();ทำให้เป้าหมายรับโฟกัสได้ก่อน
div ธรรมดาจะไม่รับโฟกัส ดังนั้นให้กำหนด tabindex="-1" ให้ปลายทาง เพื่อให้สคริปต์ย้ายโฟกัสไปได้
<div id="results" tabindex="-1">3 matches found</div>ตัวอย่าง: แสดงและย้ายโฟกัส
หลังโหลดเนื้อหาใหม่ ให้แสดงเนื้อหานั้น แล้วส่งโฟกัสไปที่นั่น เพื่อให้โปรแกรมอ่านหน้าจอเริ่มอ่าน ส่วนใหม่ 🔎
panel.hidden = false;
panel.focus();ย้ายโฟกัสไปที่หัวข้อ ไม่ใช่ทั้งส่วน
การย้ายโฟกัสไปยัง หัวข้อของส่วนใหม่มักให้ผลดีที่สุด เพราะทำให้ผู้ใช้ได้ยินชื่อที่ชัดเจนของตำแหน่งที่เพิ่งมาถึง
การลบรายการ
เมื่อผู้ใช้ลบแถว โฟกัสจะหายไปหากไม่จัดการ ให้ย้ายโฟกัสไปยัง รายการถัดไป หรือการควบคุมใกล้เคียง เพื่อให้ผู้ใช้ทำงานต่อได้
หลีกเลี่ยงการกระตุกกลับไปด้านบน
การปล่อยให้โฟกัสเด้งกลับไปด้านบนของหน้าหลังทุกการทำงานทำให้ใช้งานสะดุด ควรย้ายไปยัง ตำแหน่งที่เกี่ยวข้อง เพื่อรักษาบริบทไว้
อย่าขโมยโฟกัสโดยไม่มีเหตุผล
ย้ายโฟกัสเฉพาะเพื่อตอบสนองต่อ การกระทำของผู้ใช้ เท่านั้น การแย่งโฟกัสระหว่างการอัปเดตเบื้องหลังจะดึงผู้ใช้ออกจากสิ่งที่กำลังทำ
ยืนยันว่าทำงานสำเร็จ
ทดสอบโดยเรียกใช้การทำงานด้วยแป้นพิมพ์ แล้วดูว่า กรอบโฟกัส ไปอยู่ในตำแหน่งที่ตั้งใจไว้ทุกครั้ง
ย้ายหนึ่งครั้งต่อการทำงานหนึ่งครั้ง
การทำงานที่มีความหมายแต่ละครั้งควรทำให้เกิด การย้ายโฟกัส ที่ตั้งใจไว้เพียงครั้งเดียว ความคาดเดาได้ย่อมดีกว่าความซับซ้อนเสมอ
ตรวจสอบความเข้าใจ
คุณต้องการย้ายโฟกัสไปยัง div ที่เพิ่งแสดงหลังคลิกปุ่ม div นั้นต้องมีอะไร
สรุป
คุณได้เรียนรู้การ ย้ายโฟกัส อย่างมีจุดประสงค์: ทำให้เป้าหมายรับโฟกัสได้ด้วย tabindex="-1" เรียกใช้ focus() หลังการทำงาน และเลือกตำแหน่งที่มีประโยชน์ที่สุด ✨
คำถามที่พบบ่อย
บทเรียน “ย้ายโฟกัสหลังการดำเนินการ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ย้ายโฟกัสหลังการดำเนินการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ย้ายโฟกัสหลังการดำเนินการ”
ส่งโฟกัสไปยังจุดที่ผู้ใช้ต้องการใช้งานต่อ คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ย้ายโฟกัสหลังการดำเนินการ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- tabindex 0, -1 และห้ามใช้ค่าบวก
- ย้ายโฟกัสหลังการดำเนินการ
- คืนโฟกัสเมื่อเลเยอร์ปิดลง
- จัดการ tabindex แบบเลื่อนตำแหน่งในวิดเจ็ต