CodePen

แทรกองค์ประกอบในลำดับแท็บ

แทรกองค์ประกอบลงในลำดับแท็บตามปกติโดยใช้ tabindex="0" เช่น

<div tabindex="0">Focus me with the TAB key</div>

หากต้องการโฟกัสองค์ประกอบ ให้กดแป้น Tab หรือเรียกเมธอด focus() ขององค์ประกอบ

นำองค์ประกอบออกจากลำดับแท็บ

นำองค์ประกอบออกโดยใช้ tabindex="-1" เช่น

<button tabindex="-1">Can't reach me with the TAB key!</button>

ซึ่งจะนำองค์ประกอบออกจากลำดับแท็บตามปกติ แต่จะยังโฟกัสองค์ประกอบได้ด้วยการเรียกใช้เมธอด focus()

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

ทำสิ่งต่างๆ ได้!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

อย่าลืมใช้ steps(var(--count)) เพื่อให้ได้ผลลัพธ์ที่เหมาะสม ✨