CodePen

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

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

แทรกองค์ประกอบลงในลําดับแท็บตามปกติโดยใช้ 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 องค์ประกอบย่อยจะยังคงอยู่ในลําดับแท็บ หากต้องการนำองค์ประกอบและองค์ประกอบย่อยทั้งหมดออกจากลําดับแท็บ ให้ลองใช้inert polyfill ของ WICG โพลีฟีลจะจำลองลักษณะการทำงานของแอตทริบิวต์ inert ที่เสนอ ซึ่งป้องกันไม่ให้เทคโนโลยีความช่วยเหลือพิเศษเลือกหรืออ่านองค์ประกอบ

เริ่มดำเนินการ

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

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

โปรดสังเกตการใช้ steps(var(--count)) เพื่อให้ได้ผลลัพธ์ที่ต้องการ ✨