แอตทริบิวต์ tabindex HTML คืออะไร?

อะไรคือสิ่งที่tabindexแอตทริบิวต์ที่ใช้สำหรับใน HTML?

tabindexเป็นคุณสมบัติสากลที่รับผิดชอบสองสิ่ง:

1. มันกำหนดลำดับขององค์ประกอบ "focusable" และ
2. มันทำให้องค์ประกอบ "ที่สามารถโฟกัส"

ในใจของฉันสิ่งที่สองมีความสำคัญมากกว่าสิ่งแรก มีองค์ประกอบน้อยมากที่สามารถโฟกัสได้ตามค่าเริ่มต้น (เช่น <a> และตัวควบคุมฟอร์ม) นักพัฒนามักเพิ่มตัวจัดการเหตุการณ์ JavaScript บางอย่าง (เช่น 'onclick') บนองค์ประกอบที่ไม่สามารถโฟกัสได้ (<div>, <span> และอื่น ๆ ) และวิธีที่ทำให้อินเทอร์เฟซของคุณไม่ตอบสนองต่อเหตุการณ์เมาส์เท่านั้น (เช่น 'onkeypress') คือการทำให้องค์ประกอบดังกล่าวสามารถโฟกัสได้ สุดท้ายหากคุณไม่ต้องการตั้งค่าคำสั่งซื้อ แต่ให้ใช้องค์ประกอบที่สามารถโฟกัสได้tabindex="0"กับองค์ประกอบดังกล่าวทั้งหมด:

<div tabindex="0"></div>

tabindex="-1"นอกจากนี้ถ้าคุณไม่อยากให้มันเป็นที่สามารถโฟกัสผ่านคีย์แท็บแล้วใช้ ตัวอย่างเช่นลิงค์ด้านล่างจะไม่ได้รับการมุ่งเน้นในขณะที่ใช้ปุ่มแท็บเพื่อสำรวจ

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

เมื่อผู้ใช้กดปุ่มแท็บผู้ใช้จะถูกนำผ่านแบบฟอร์มตามลำดับ 1, 2 และ 3 ตามที่ระบุในตัวอย่างด้านล่าง

ตัวอย่างเช่น:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

TabIndexใช้เพื่อกำหนดลำดับที่ผู้ใช้ปฏิบัติเมื่อใช้ปุ่ม Tab เพื่อสำรวจหน้าต่างๆ ตามค่าเริ่มต้นลำดับแท็บแบบธรรมชาติจะตรงกับลำดับแหล่งที่มาในมาร์กอัป

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

tabindexเริ่มต้นที่ 0 หรือจำนวนเต็มบวกใด ๆ และการเพิ่มขึ้นสูงขึ้น เป็นเรื่องปกติที่จะเห็นค่า 0 หลีกเลี่ยงเพราะใน Mozilla และ IE เวอร์ชันเก่า tabindex จะเริ่มต้นที่ 1 ไปที่ 2 และหลังจาก 2 มันจะเป็น 0 แล้ว 3 ค่าจำนวนเต็มสูงสุดสำหรับtabindex32767มี หากองค์ประกอบมีเหมือนกันtabindexแล้ว tabindex จะตรงกับลำดับแหล่งที่มาในมาร์กอัป ค่าลบจะลบองค์ประกอบออกจากดัชนีแท็บดังนั้นจะไม่ถูกเน้น

หากองค์ประกอบได้รับมอบหมาย tabindexของ-1มันจะลบองค์ประกอบและมันจะไม่สามารถโฟกัส element.focus()แต่เน้นจะได้รับการองค์ประกอบทางโปรแกรมโดยใช้

หากคุณระบุtabindexแอ็ตทริบิวต์ที่ไม่มีค่าหรือค่าว่างจะถูกละเว้น

หากdisabledมีการตั้งค่าแอตทริบิวต์ในองค์ประกอบที่มีtabindexองค์ประกอบจะถูกละเว้น

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

ในข้อมูลจำเพาะ HTML4 เฉพาะองค์ประกอบต่อไปนี้สนับสนุนแอตทริบิวต์ tabindex: สมอ, พื้นที่, ปุ่ม, อินพุต, วัตถุ, เลือกและ textarea. แต่สเปค HTML5 tabindexที่มีการเข้าถึงในใจจะช่วยให้องค์ประกอบทั้งหมดจะได้รับมอบหมาย

-

ตัวอย่างเช่น

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

เป็นเช่นเดียวกับ

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

เพราะโดยไม่คำนึงถึงความจริงที่ว่าพวกเขาได้รับมอบหมายทั้งหมดtabindex="1"พวกเขาจะยังคงปฏิบัติตามคำสั่งเดิมคนแรกเป็นคนแรกและคนสุดท้ายเป็นคนสุดท้าย นี่ก็เหมือนกัน ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

เนื่องจากคุณไม่จำเป็นต้องกำหนด tabIndex อย่างชัดเจนหากเป็นการทำงานเริ่มต้น A divโดยค่าเริ่มต้นจะไม่สามารถโฟกัสได้anchorแท็กจะ

การควบคุมลำดับการแท็บ (กดปุ่มtabเพื่อย้ายโฟกัส) ภายในหน้า

การอ้างอิง: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

ค่าที่คุณกำหนดจะกำหนดลำดับที่โฟกัสบนคีย์บอร์ดของคุณจะย้ายระหว่างองค์ประกอบต่างๆบนเว็บไซต์

ในตัวอย่างต่อไปนี้ในครั้งแรกที่คุณกดแท็บเคอร์เซอร์ของคุณจะเลื่อนไปที่ #foo จากนั้นตามด้วย #awesome จากนั้น #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

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

หากคุณแท็บมากกว่าเวลาที่คุณระบุแท็บดัชนีสำหรับโฟกัสจะย้ายราวกับว่าไม่มีแท็บดัชนีกล่าวคือตามลำดับการปรากฏของแท็ก HTML

มันสามารถใช้เพื่อเปลี่ยนลำดับการนำทางองค์ประกอบโฟกัสรูปแบบเริ่มต้น

ดังนั้นถ้าคุณมี:

text input A

text input B

submit button C

โดยใช้ปุ่มแท็บที่คุณนำทางผ่าน A-> B-> C Tabindex ช่วยให้คุณสามารถเปลี่ยนการไหลที่

โดยปกติเมื่อผู้ใช้แท็บจากฟิลด์หนึ่งไปยังอีกฟิลด์หนึ่งในรูปแบบ (ในเบราว์เซอร์ที่อนุญาตให้ทำการแท็บไม่ใช่ทุกเบราว์เซอร์ที่ทำ) ลำดับคือฟิลด์ที่ปรากฏในโค้ด HTML

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

ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้สามารถพบได้ที่นี่w3

อีกภาพประกอบที่ดีสามารถพบได้ที่นี่

ในคำง่าย ๆtabindexใช้เพื่อมุ่งเน้นไปที่องค์ประกอบ ไวยากรณ์: tabindex="numeric_value" นี่numeric_valueคือน้ำหนักขององค์ประกอบ ค่าที่ต่ำกว่าจะเข้าถึงได้ก่อน

ใช้ HTML TabIndex atribute เป็นผู้รับผิดชอบในการแสดงให้เห็นว่าถ้าเป็นองค์ประกอบที่สามารถเข้าถึงได้โดยการนำทางแป้นพิมพ์ เมื่อผู้ใช้กดปุ่มTabระบบจะเปลี่ยนโฟกัสจากองค์ประกอบหนึ่งไปอีกองค์ประกอบหนึ่ง โดยใช้แอททริบิว tabindex ลำดับการไหลของแท็บจะถูกเลื่อน

การแท็บผ่านตัวควบคุมมักเกิดขึ้นตามลำดับเมื่อปรากฏบนโค้ด HTML

การใช้ tabindex แท็บจะไหลจากการควบคุมด้วย tabindex ที่ต่ำที่สุดไปยังการควบคุมที่มี tabindex สูงสุดในการเรียงลำดับ tabindex