使用tab键导航时，我可以忽略一些网站元素吗？

Question

真的是问题。我在页面上有一个输入框，我想在使用键盘选项卡键导航时忽略它。

我正在使用这个输入框作为一个简单的机器人蜜罐并将其定位在页面之外，因此在使用tab键时，它会向用户显示，当它们选中此元素时没有任何焦点。

Answer 1

您可以在此元素上设置tabindex="-1"，以便在Tab键顺序中忽略它。 0告诉浏览器找出它自己的Tab键顺序，-1告诉浏览器忽略它。

Answer 2

您可以使用tabindex属性来定义Tab键循环元素的顺序。如果设置tabindex="-1"，则会跳过该元素。

有关更多信息，请点击此处http://www.webcheatsheet.com/HTML/controll_tab_order.php。

UPDATE根据注释将tabindex =“0”更改为“-1”

Answer 3

相反，display: none。

Answer 4

我在输入元素上使用了解决方法disabled标志，因为在我的情况下不需要用户输入:)

3输入示例：

.container {
  display: flex;
  flex-direction: column;
}
input {
  width: 200px;
  margin-bottom: 10px;
}

<div class="container">
  <input placeholder="Not disabled"/>
  <input placeholder="Disabled - skipped by tab" disabled/>
  <input placeholder="Not disabled"/> 
</div>

希望它适用于<3 - Chrome，Edge，Firefox和“伪”浏览器IE测试的人。