Thuộc tính tabindex HTML là gì?

Là gì tabindexthuộc tính được sử dụng để trong HTML?

tabindexlà một thuộc tính toàn cầu chịu trách nhiệm cho hai điều:

1. nó đặt thứ tự các yếu tố "có thể tập trung" và
2. nó làm cho các yếu tố "tập trung" .

Trong tâm trí tôi, điều thứ hai thậm chí còn quan trọng hơn điều thứ nhất. Có rất ít yếu tố có thể tập trung theo mặc định (ví dụ: <a> và điều khiển biểu mẫu). Các nhà phát triển thường thêm một số trình xử lý sự kiện JavaScript (như 'onclick') vào các yếu tố không thể tập trung (<div>, <span>, v.v.) và cách làm cho giao diện của bạn phản ứng không chỉ với các sự kiện chuột mà cả các sự kiện bàn phím (ví dụ: 'onkeypress') là làm cho các yếu tố đó có thể tập trung. Cuối cùng, nếu bạn không muốn đặt thứ tự mà chỉ làm cho phần tử của bạn có thể tập trung sử dụng tabindex="0"cho tất cả các phần tử như vậy:

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

Ngoài ra, nếu bạn không muốn nó có thể được lấy nét thông qua phím tab thì hãy sử dụng tabindex="-1". Ví dụ: liên kết bên dưới sẽ không được tập trung trong khi sử dụng các phím tab để duyệt qua.

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

Khi người dùng nhấn nút tab, người dùng sẽ được thực hiện thông qua biểu mẫu theo thứ tự 1, 2 và 3 như được chỉ ra trong ví dụ dưới đây.

Ví dụ:

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

Các tabindexđược sử dụng để xác định trình tự mà người dùng theo dõi khi họ sử dụng phím Tab để điều hướng qua một trang. Theo mặc định, thứ tự tab tự nhiên sẽ khớp với thứ tự nguồn trong đánh dấu.

Thuộc tính nội dung tabindex cho phép các tác giả kiểm soát xem một phần tử có được coi là có thể lấy nét được hay không, liệu nó có thể truy cập được bằng cách sử dụng điều hướng tiêu điểm tuần tự hay không và thứ tự tương đối của phần tử cho mục đích điều hướng lấy nét liên tiếp. Tên "chỉ mục tab" xuất phát từ việc sử dụng chung phím "tab" để điều hướng qua các yếu tố có thể tập trung. Thuật ngữ "tabbing" dùng để chỉ chuyển tiếp qua các yếu tố có thể lấy nét có thể đạt được bằng cách sử dụng điều hướng lấy nét liên tiếp.
Khuyến nghị của W3C:
Phần HTML5 7.4.1 Điều hướng tiêu điểm liên tục và thuộc tính tabindex

Các tabindexbắt đầu từ 0 hoặc bất kỳ số nguyên dương và tăng lên trên. Chúng ta thường thấy giá trị 0 được tránh vì trong các phiên bản cũ hơn của Mozilla và IE, tabindex sẽ bắt đầu từ 1, chuyển sang 2 và chỉ sau 2, nó sẽ chuyển sang 0 và sau đó 3. Giá trị số nguyên tối đa tabindexlà 32767. Nếu các phần tử giống nhau tabindexthì tabindex sẽ khớp với thứ tự nguồn trong đánh dấu. Một giá trị âm sẽ xóa phần tử khỏi chỉ mục tab để nó không bao giờ được tập trung.

Nếu một phần tử được gán một tabindexcủa -1nó sẽ loại bỏ các yếu tố và nó sẽ không bao giờ có thể đặt tiêu điểm nhưng tập trung có thể được trao cho các phần tử lập trình sử dụng element.focus().

Nếu bạn chỉ định tabindexthuộc tính không có giá trị hoặc giá trị trống, nó sẽ bị bỏ qua.

Nếu disabledthuộc tính được đặt trên một phần tử có a tabindex, phần tử đó sẽ bị bỏ qua.

Nếu a tabindexđược đặt ở bất kỳ đâu trong trang bất kể nó nằm ở đâu so với phần còn lại của mã (nó có thể nằm ở chân trang, vùng nội dung, từ trước đến nay) nếu có một định nghĩa tabindexthì thứ tự tab sẽ bắt đầu ở phần tử được gán rõ ràng tabindexgiá trị thấp nhất trên 0. Sau đó, nó sẽ quay vòng qua các phần tử được xác định và chỉ sau khi các tabindexphần tử rõ ràng được gắn thẻ, nó sẽ trở về đầu tài liệu và tuân theo thứ tự tab tự nhiên.

Trong đặc tả HTML4, chỉ các phần tử sau hỗ trợ thuộc tính tabindex: mỏ neo, khu vực, cái nút, đầu vào, vật, lựa chọnvà văn bản. Nhưng thông số HTML5, với khả năng truy cập trong tâm trí, cho phép tất cả các yếu tố được chỉ định tabindex.

-

Ví dụ

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

giống như

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

bởi vì bất kể thực tế là tất cả chúng đều được chỉ định tabindex="1", chúng vẫn sẽ tuân theo cùng một thứ tự, cái đầu tiên là đầu tiên và cái cuối cùng là cuối cùng. Điều này cũng giống nhau ..

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

bởi vì bạn không cần xác định rõ ràng tab Index nếu đó là hành vi mặc định. A divtheo mặc định sẽ không thể tập trung, các anchorthẻ sẽ.

Kiểm soát thứ tự lập bảng (nhấn tabphím để di chuyển tiêu điểm) trong trang.

Tham khảo: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

các giá trị bạn đặt sẽ xác định thứ tự mà tiêu điểm bàn phím của bạn sẽ di chuyển giữa các thành phần trên trang web.

Trong ví dụ sau, lần đầu tiên bạn nhấn tab, con trỏ của bạn sẽ di chuyển đến #foo, sau đó #awgie, sau đó #bar

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

Nếu bạn chưa xác định chỉ mục tab ở bất kỳ đâu, tiêu điểm bàn phím sẽ theo các thẻ HTML của trang bạn theo thứ tự chúng được xác định trong tài liệu HTML.

Nếu bạn tab nhiều lần hơn bạn đã chỉ định tabindexes, tiêu điểm sẽ di chuyển như thể không có tabindexes, tức là theo thứ tự xuất hiện của các thẻ HTML

Nó có thể được sử dụng để thay đổi trình tự điều hướng tiêu điểm của phần tử biểu mẫu mặc định.

Vì vậy, nếu bạn đã có:

text input A

text input B

submit button C

bằng cách sử dụng phím tab bạn điều hướng qua A-> B-> C. Tabindex cho phép bạn thay đổi dòng chảy đó.

Thông thường, khi người dùng tab từ trường này sang trường khác trong một biểu mẫu (trong trình duyệt cho phép lập bảng, không phải tất cả các trình duyệt đều làm), thứ tự là thứ tự các trường xuất hiện trong mã HTML.

Tuy nhiên, đôi khi bạn muốn thứ tự tab chảy khác đi một chút. Trong trường hợp đó, bạn có thể đánh số các trường bằng TABINDEX. Các tab sau đó chảy theo thứ tự từ TABINDEX thấp nhất đến cao nhất.

Thông tin thêm về điều này có thể được tìm thấy ở đây w3

một minh họa tốt khác có thể được tìm thấy ở đây

Trong các từ đơn giản, tabindexđược sử dụng để tập trung vào các yếu tố. Cú pháp: tabindex="numeric_value" Đây numeric_valuelà trọng số của phần tử. Giá trị thấp hơn sẽ được truy cập đầu tiên.

Thuộc tính tabindex HTML chịu trách nhiệm cho biết liệu một phần tử có thể truy cập bằng điều hướng bàn phím hay không . Khi người dùng nhấn phím Tab , tiêu điểm sẽ được chuyển từ yếu tố này sang yếu tố khác. Bằng cách sử dụng thuộc tính tabindex, luồng thứ tự tab được thay đổi.

Việc chuyển qua các điều khiển thường xảy ra tuần tự khi chúng xuất hiện trên mã HTML.

Sử dụng tabindex, việc gắn thẻ sẽ chuyển từ điều khiển với tabindex thấp nhất sang điều khiển với tabindex cao nhất theo thứ tự tuần tự tabindex