แอตทริบิวต์ tabindex
แอตทริบิวต์ tabindex กำหนดลำดับ
การรับโฟกัสเมื่อสลับระหว่างองค์ประกอบ
โดยใช้ปุ่ม Tab
โดยการกดปุ่มนี้ คุณสามารถเปิดใช้งานองค์ประกอบบางส่วนของหน้าเว็บตามลำดับ (เช่น ลิงก์ และองค์ประกอบของ ฟอร์ม) องค์ประกอบที่ถูกเปิดใช้งานจะได้รับโฟกัสอินพุต
สำหรับช่องอินพุตประเภท input
และ textarea
โฟกัสจะแสดงออกมาโดยเคอร์เซอร์จะกระพริบในช่อง
และสามารถป้อนข้อความเข้าไปได้ ส่วนลิงก์
และองค์ประกอบอื่น ๆ นั้น
จะถูกเน้นด้วยวิธีใดวิธีหนึ่ง (ขีดเส้นใต้,
วาดเส้นขอบประ และอื่น ๆ ขึ้นอยู่กับเบราว์เซอร์)
หากในขณะที่ได้รับโฟกัส องค์ประกอบนั้น ไม่ปรากฏบนหน้าเว็บ (เนื่องจากการเลื่อน) หน้าเว็บจะเลื่อนไปยังองค์ประกอบนั้น
หากองค์ประกอบไม่ได้กำหนดแอตทริบิวต์ tabindex
หรือมีค่าเป็น 0 การสลับ
ไปยังองค์ประกอบเหล่านั้นด้วยปุ่ม Tab จะเกิดขึ้นตามลำดับ
การปรากฏขององค์ประกอบในโค้ด HTML
หากบนหน้ามีองค์ประกอบที่กำหนด
tabindex ไว้ การสลับจะ
เกิดขึ้นตามองค์ประกอบเหล่านั้นก่อน โดยเริ่มจากค่าแอตทริบิวต์
tabindex ที่น้อยกว่า (ค่าที่น้อยที่สุด
คือหนึ่ง) และต่อ ๆ ไปตามค่าที่เพิ่มขึ้นของแอตทริบิวต์
และเมื่อองค์ประกอบประเภทนี้
หมดแล้ว การสลับจะเกิดขึ้นตามองค์ประกอบ
ที่ไม่ได้กำหนด tabindex หรือมี
ค่าเป็น 0
ค่าของแอตทริบิวต์เป็นจำนวนเต็มตั้งแต่
1 ถึงอนันต์ หากบาง
หมายเลขถูกข้ามไป ก็ไม่มีปัญหาอะไร (เช่น หากไม่มีหมายเลข 2
โฟกัสจะไปที่องค์ประกอบที่มี tabindex
เท่ากับ 1 ก่อน แล้วจึงไปที่องค์ประกอบที่มี tabindex
เท่ากับ 3)
หากในขณะที่กดปุ่ม
Tab บนหน้ามีองค์ประกอบที่มีโฟกัสอยู่ (โฟกัสอาจ
ได้รับไม่เพียงจากการกด Tab
แต่ยังมาจากการคลิกเมาส์บนองค์ประกอบหรือจากแอตทริบิวต์
autofocus)
การกดปุ่ม Tab ครั้งต่อไปจะทำให้
องค์ประกอบถัดไปตามลำดับหลังจากองค์ประกอบที่มีโฟกัสอยู่ได้รับโฟกัส (เช่น
หากขณะนี้โฟกัสอยู่ที่องค์ประกอบที่มี tabindex
3 องค์ประกอบถัดไปที่ได้รับโฟกัสคือองค์ประกอบ
ที่มี tabindex 4)
หากช่องอินพุตมีแอตทริบิวต์ disabled
มันจะถูกเพิกเฉยโดยการสลับผ่าน
ปุ่ม Tab แม้ว่าช่องนั้นจะมีแอตทริบิวต์
tabindex ก็ตาม
แอตทริบิวต์ tabindex ใช้กับแท็ก
a,
input,
textarea,
button,
select,
area
ตัวอย่าง
ลองกำหนดแอตทริบิวต์ tabindex ให้กับ อินพุต
ต่างๆ กดปุ่ม Tab ตามลำดับ และคุณจะเห็นว่า
โฟกัสอินพุตจะเปลี่ยนจากอินพุตแรก
ไปที่สี่ แล้วจึงไปที่ลิงก์ต่างๆ
ตั้งแต่ต้นหน้า (เนื่องจากไม่มีองค์ประกอบอื่น
ที่มีแอตทริบิวต์ tabindex กำหนดไว้):
<input type="text" tabindex="3" placeholder="หมายเลข: 3">
<input type="text" tabindex="1" placeholder="หมายเลข: 1">
<input type="text" tabindex="2" placeholder="หมายเลข: 2">
<input type="text" tabindex="4" placeholder="หมายเลข: 4">
:
ดูเพิ่มเติม
-
ซูโดคลาส
:focus,
ซึ่งช่วยให้สามารถเปลี่ยนสไตล์ขององค์ประกอบที่มีโฟกัสได้
