html - 使用 Tab 键导航时可以忽略某些网站元素吗？

Question

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

我将此输入框用作一个简单的机器人蜜罐并将其定位在页面之外，因此在使用 tab 键的那一刻，它看起来对用户来说，当他们点击这个元素时似乎没有任何焦点。

Answer 1

您可以tabindex="-1"在此元素上设置 ，以便在制表符顺序中忽略它。 0告诉浏览器自己找出标签顺序，-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 测试的人。