如何使HTML元素不可聚焦？

Question

是否可以制作HTML元素不可聚焦？

据我所知，a list of elements that can receive focus可以定义，并且用户可以通过按Tab键浏览这些元素。我也看到，这取决于浏览器来控制这一点。

但也许有一种方法可以使某些元素不可聚焦，比如我想让用户在按下Tab时跳过某个Anchor标记。

Answer 1

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

负值意味着该元素应该是可聚焦的，但不应该是通过顺序键盘导航可达。

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

Answer 2

TabIndex是您要找的东西：http://www.w3schools.com/jsref/prop_html_tabindex.asp。

当您将tabIndex值设置为-1时，您在浏览表单时将跳过它。

Answer 3

对于你不想把重点放在选项卡中的元素，你必须把tabindex属性为负值。

Answer 4

我只是读YouTube的源代码，我看可聚焦= “假”

<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>

那是一个更正确的答案？

Answer 5

要完全防止焦点，不只是在使用选项卡按钮时，请将disabled设置为HTML元素中的属性。

<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.

的