Thuộc tính tabindex

Thuộc tính tabindex thiết lập thứ tự nhận tiêu điểm khi chuyển đổi giữa các phần tử bằng phím Tab.

Bằng cách nhấn phím này, bạn có thể kích hoạt tuần tự một số phần tử trên trang (liên kết và các phần tử biểu mẫu). Các phần tử được kích hoạt sẽ nhận tiêu điểm nhập liệu.

Đối với các trường nhập liệu loại input và textarea, tiêu điểm sẽ thể hiện ở việc con trỏ sẽ nhấp nháy trong trường và bạn có thể nhập văn bản vào đó, đối với liên kết và các phần tử khác, nó sẽ được đánh dấu bằng cách nào đó (gạch chân, viền nét đứt xung quanh, v.v., tùy thuộc vào trình duyệt).

Nếu tại thời điểm nhận tiêu điểm phần tử không được nhìn thấy trên trang (do cuộn), thì trang sẽ được cuộn đến phần tử đó.

Nếu các phần tử không được đặt thuộc tính tabindex hoặc nó có giá trị 0, thì việc chuyển qua chúng bằng phím Tab sẽ diễn ra theo thứ tự các phần tử xuất hiện trong mã HTML.

Nếu trên trang có các phần tử được đặt tabindex, thì trước tiên việc chuyển sẽ diễn ra qua chúng, bắt đầu từ giá trị thuộc tính tabindex nhỏ hơn (giá trị nhỏ nhất có thể là một) và cứ thế tăng dần giá trị thuộc tính, và khi các phần tử như vậy hết - việc chuyển sẽ tiếp tục qua các phần tử mà không được đặt tabindex hoặc nó có giá trị 0.

Giá trị của thuộc tính là các số nguyên từ 1 đến vô cùng. Nếu một số số thứ tự bị bỏ qua - không có vấn đề gì xảy ra (ví dụ, nếu không có số 2, thì đầu tiên tiêu điểm sẽ rơi vào phần tử có tabindex bằng 1, sau đó đến phần tử có tabindex bằng 3).

Nếu trên trang tại thời điểm nhấn phím Tab có phần tử đang được focus (tiêu điểm có thể được nhận không chỉ bằng cách nhấn Tab, mà còn bằng cách nhấp chuột vào phần tử hoặc thuộc tính autofocus), thì lần nhấn phím Tab tiếp theo sẽ dẫn đến việc phần tử tiếp theo theo thứ tự sau phần tử đang được focus sẽ nhận tiêu điểm (ví dụ, nếu hiện tại phần tử có tabindex 3 đang được focus, thì phần tử tiếp theo nhận tiêu điểm sẽ là phần tử có tabindex 4).

Nếu trường nhập liệu được đặt thuộc tính disabled, thì nó sẽ bị bỏ qua khi chuyển qua phím Tab, ngay cả khi trường đó được đặt thuộc tính tabindex.

Thuộc tính tabindex được áp dụng cho các thẻ a, input, textarea, button, select, area.

Ví dụ

Hãy đặt thuộc tính tabindex cho các input. Hãy nhấn tuần tự phím Tab và bạn sẽ thấy tiêu điểm nhập liệu sẽ chuyển từ input đầu tiên đến input thứ tư, sau đó sẽ đi qua các liên kết từ đầu trang (vì không còn phần tử nào khác có thuộc tính tabindex được đặt):

:

Xem thêm