Làm thế nào để làm cho một phần tử HTML không thể tập trung?

Question

Có thể tạo thành phần HTML không tập trung không?

Tôi hiểu rằng a list of elements that can receive focus có thể được xác định và người dùng có thể điều hướng qua các yếu tố này bằng cách nhấn phím Tab. Tôi cũng thấy rằng trình duyệt có thể kiểm soát được điều này.

Nhưng có thể có cách để làm cho các yếu tố nhất định không thể lấy nét, giả sử tôi muốn người dùng bỏ qua một thẻ Anchor nhất định khi nhấn Tab.

Answer 1

<a href="http://foo.bar" tabIndex="-1">unfocusable</a> 

Giá trị âm có nghĩa là phần tử nên được lấy tiêu điểm, nhưng không thể truy cập được thông qua điều hướng bàn phím tuần tự.

https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex

Answer 2

TabIndex là nội dung bạn đang tìm kiếm: http://www.w3schools.com/jsref/prop_html_tabindex.asp.

Khi bạn đặt giá trị tabIndex thành -1, bạn sẽ bỏ qua khi tabbing qua biểu mẫu của bạn.

Answer 3

Đối với các yếu tố bạn không muốn được tập trung vào tab, bạn phải đặt tabIndex như một giá trị âm.

Answer 4

Tôi chỉ đọc mã nguồn YouTube, tôi thấy có thể đặt tiêu = "false"

<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>

Có phải đó là một câu trả lời chính xác hơn?

Answer 5

Để ngăn chặn hoàn toàn tiêu điểm, không chỉ khi sử dụng tab , đặt disabled làm thuộc tính trong phần tử HTML của bạn.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<input class="form-control" type="text"> Click this, you can see it's focusable. 
 

 
<input class="form-control" type="text" readonly> Click this, you can see it's focusable. 
 

 
<input class="form-control" type="text" readonly tabindex="-1"> Click this, you can see it's focusable. Not tab'able. 
 

 
<input class="form-control" type="text" disabled> Click this, you can see it's <strong>not</strong> focusable.