Làm cách nào để bỏ qua phần tử HTML từ tabindex?

Có cách nào trong HTML để nói với trình duyệt không cho phép lập chỉ mục tab trên các thành phần cụ thể không?

Trên trang của tôi mặc dù có một trình diễn được hiển thị bằng jQuery, khi bạn lướt qua đó, bạn sẽ nhận được rất nhiều lần nhấn tab trước khi điều khiển tab di chuyển đến liên kết hiển thị tiếp theo trên trang vì tất cả những điều được chuyển qua tab đều bị ẩn đi người dùng trực quan.

Bạn có thể sử dụng tabindex="-1".

Đặc tả HTML5 của W3C hỗ trợ các tabindexgiá trị âm :

Nếu giá trị là số nguyên âm
Tác nhân người dùng phải đặt cờ tiêu điểm tabindex của phần tử, nhưng không cho phép phần tử đạt được bằng cách sử dụng điều hướng tiêu điểm liên tiếp.

Xem ra mặc dù đây là một tính năng HTML5 và có thể không hoạt động với các trình duyệt cũ.
Để tuân thủ tiêu chuẩn W3C HTML 4.01 (từ 1999) , tabindex sẽ cần phải tích cực.

Sử dụng mẫu dưới đây trong HTML thuần túy.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

Đừng quên rằng, mặc dù tabindextất cả là chữ thường trong thông số kỹ thuật và trong HTML, trong Javascript / DOM mà thuộc tính đó được gọi tabIndex.

Đừng mất trí khi cố gắng tìm hiểu lý do tại sao các chỉ số tab được thay đổi theo chương trình của bạn gọi element.tabindex = -1không hoạt động. Sử dụng element.tabIndex = -1.

Nếu đây là các yếu tố tự nhiên trong thứ tự tab như nút và neo, loại bỏ chúng khỏi thứ tự tab với tabindex = -1 là một loại mùi có thể truy cập. Nếu họ cung cấp chức năng trùng lặp, loại bỏ chúng khỏi thứ tự tab là ổn, và xem xét thêm aria-hidden = true cho các yếu tố này để các công nghệ hỗ trợ sẽ bỏ qua chúng.

Nếu bạn đang làm việc trong một trình duyệt không hỗ trợ tabindex="-1", bạn có thể thoát khỏi việc chỉ đưa ra những thứ cần bỏ qua một chỉ số tab thực sự cao . Ví dụ, tabindex="500"về cơ bản di chuyển thứ tự tab của đối tượng đến cuối trang.

Tôi đã làm điều này cho một hình thức nhập dữ liệu dài với một nút ném ở giữa của nó. Đây không phải là nút mọi người nhấp rất thường xuyên nên tôi không muốn họ vô tình bấm vào nút đó và nhấn enter. disabledsẽ không hoạt động vì đó là một nút.

Cách hack như "tab Index = -1" không hoạt động với tôi với Chrome v53.

Đây là hoạt động cho chrome và hầu hết các trình duyệt:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Cách để làm điều này là bằng cách thêm tabindex="-1". Bằng cách thêm phần này vào một phần tử cụ thể, nó trở nên không thể truy cập bằng điều hướng bàn phím. Có một bài viết tuyệt vời ở đây sẽ giúp bạn hiểu thêm về tabindex .

Chỉ cần thêm thuộc tính disabledcho phần tử (hoặc sử dụng jQuery để làm điều đó cho bạn). Vô hiệu hóa ngăn chặn đầu vào được tập trung hoặc lựa chọn cả.