วิธีการละเว้นองค์ประกอบ HTML จาก tabindex?

มีวิธีใดบ้างใน HTML ที่จะบอกเบราว์เซอร์ว่าไม่อนุญาตให้สร้างดัชนีแท็บในองค์ประกอบเฉพาะหรือไม่

ในหน้าของฉันแม้ว่าจะมีการแสดงภาพสไลด์ที่แสดงด้วย jQuery เมื่อคุณแท็บผ่านหน้าจอนั้นคุณจะได้รับการกดแท็บจำนวนมากก่อนที่ตัวควบคุมแท็บจะย้ายไปยังลิงก์ที่มองเห็นได้ถัดไปบนหน้าเว็บ ผู้ใช้มองเห็น

tabindex="-1"คุณสามารถใช้

ข้อกำหนดW3C HTML5รองรับtabindexค่าลบ:

หากค่าเป็นจำนวนเต็มลบ
เอเจนต์ผู้ใช้จะต้องตั้งค่าสถานะโฟกัสขององค์ประกอบ tabindex แต่ไม่ควรอนุญาตให้องค์ประกอบเข้าถึงองค์ประกอบโดยใช้การนำทางโฟกัสตามลำดับ

ระวังว่านี่เป็นคุณสมบัติ HTML5 และอาจไม่ทำงานกับเบราว์เซอร์รุ่นเก่า
เพื่อให้เป็นไปตามมาตรฐาน W3C HTML 4.01 (จากปี 1999) Tabindex จะต้องเป็นค่าบวก

ตัวอย่างการใช้งานด้านล่างด้วย HTML ล้วนๆ

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

อย่าลืมว่าแม้tabindexเป็นตัวพิมพ์เล็กทั้งหมดในรายละเอียดและใน HTML ในJavascript / DOM tabIndexที่คุณสมบัติที่เรียกว่า

อย่าลืมที่จะคิดออกว่าทำไมการที่ดัชนีแท็บที่มีการเปลี่ยนแปลงทางโปรแกรมโทรelement.tabindex = -1ไม่ทำงาน element.tabIndex = -1ใช้

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

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

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

แฮ็คเช่น "tabIndex = -1" ใช้งานไม่ได้กับ Chrome v53

สิ่งนี้ใช้ได้กับ chrome และเบราว์เซอร์ส่วนใหญ่:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

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

เพียงเพิ่มคุณสมบัติdisabledให้กับองค์ประกอบ (หรือใช้ jQuery เพื่อทำเพื่อคุณ) ปิดใช้งานจะป้องกันไม่ให้อินพุตถูกโฟกัสหรือเลือกเลย