Tabindex = “- 1” trong bootstrap để làm gì

Là gì tabindexthuộc tính trong Bootstrap 3 cho?

Tài liệu của nó không nói bất cứ điều gì về chúng mặc dù chúng sử dụng chúng thực tế trong tất cả các phương thức.

Tôi chỉ tìm thấy điều này liên quan đến việc sử dụng nó, điều này không thực sự nói nhiều

Chú giải công cụ có thể tiếp cận cho người dùng bàn phím và công nghệ hỗ trợ

Đối với người dùng điều hướng bằng bàn phím và cụ thể là những người dùng công nghệ hỗ trợ, bạn chỉ nên thêm chú giải công cụ vào các phần tử có thể lấy tiêu điểm bằng bàn phím như liên kết, điều khiển biểu mẫu hoặc bất kỳ phần tử tùy ý nào có thuộc tính tabindex = "0".

Và tôi phát hiện ra rằng tôi không thể nhấn escđể ẩn một phương thức nếu tabindexthuộc tính không-1 .

• Phương thức đóng sau khi nhấn escphím (với tabindex)
• Phương thức không đóng sau khi nhấn escphím (không có tabindex)

Các tabindexthuộc tính định nghĩa một cách rõ ràng trật tự cho các yếu tố thể đặt tiêu điểm (thường là liên kết và hình thức kiểm soát) trong một trang. Nó cũng có thể được sử dụng để xác định xem các phần tử có nên được lấy nét hay không.

[Cả hai] tabindex="0"và tabindex="-1"có ý nghĩa đặc biệt và cung cấp chức năng riêng biệt trong HTML. Giá trị của 0chỉ ra rằng phần tử phải được đặt theo thứ tự điều hướng mặc định. Điều này cho phép các yếu tố mà không phải là tự nhiên có thể đặt tiêu (ví dụ như <div>, <span>, và<p> ) để nhận tập trung bàn phím. Tất nhiên người ta thường sử dụng các liên kết và điều khiển biểu mẫu cho tất cả các phần tử tương tác, nhưng điều này cho phép các phần tử khác có thể lấy tiêu điểm và kích hoạt tương tác.

Một tabindex="-1"giá trị xóa phần tử khỏi luồng điều hướng mặc định (tức là người dùng không thể gắn thẻ vào nó), nhưng nó cho phép nó nhận tiêu điểm theo chương trình , nghĩa là có thể đặt tiêu điểm cho phần tử đó từ một liên kết hoặc bằng tập lệnh. ** Điều này có thể rất hữu ích cho các phần tử không nên được gắn thẻ, nhưng có thể cần phải đặt tiêu điểm cho chúng .

Một ví dụ điển hình là cửa sổ hộp thoại phương thức - khi mở ra, tiêu điểm phải được đặt thành hộp thoại để trình đọc màn hình sẽ bắt đầu đọc và bàn phím sẽ bắt đầu điều hướng trong hộp thoại. Bởi vì hộp thoại (có thể chỉ là một <div>phần tử) không thể lấy tiêu điểm theo mặc định, việc gán tabindex="-1"cho hộp thoại cho phép đặt tiêu điểm cho hộp thoại với tập lệnh khi nó được trình bày.

Giá trị của -1cũng có thể hữu ích trong các tiện ích và menu phức tạp sử dụng các phím mũi tên hoặc các phím tắt khác để đảm bảo rằng chỉ một phần tử trong tiện ích con có thể điều hướng được bằng phím tab, nhưng vẫn cho phép đặt tiêu điểm trên các thành phần khác trong tiện ích con.

Nguồn: http://webaim.org/techniques/keyboard/tabindex

Đây là lý do tại sao bạn cần tabindex="-1"trên phương thức <div>, để người dùng có thể truy cập các phím tắt và chuột phổ biến. Hy vọng rằng sẽ giúp.

Các tabIndex thuộc tính có liên quan đến HTML , nó không phải là cụ thể cho Bootstrap.

Thuộc tính này chịu trách nhiệm cho biết nếu một phần tử có thể truy cập được bằng điều hướng bàn phím.

Bạn cần chú ý đến ba trường hợp khác nhau:

1. Khi thêm tabindex = "0"vào một phần tử, điều này có nghĩa là nó có thể truy cập được bằng điều hướng bàn phím nhưng thứ tự được xác định bởi thứ tự nguồn tài liệu.

2. Khi thêm giá trị dương vào thuộc tính tabindex (ví dụ tabindex = "1", tabindex = "2"), các phần tử đó có thể truy cập được bằng điều hướng bàn phím và thứ tự được xác định bởi giá trị của thuộc tính.

3. Khi thêm giá trị âm vào tabindex (thường tabindex="-1"), điều đó có nghĩa là phần tử không thể truy cập được bằng điều hướng bàn phím, nhưng có thể được lấy tiêu điểm bằng cách sử dụng chức năng tiêu điểm trong JS.