我可以在使用Tab键浏览网页时忽略某些网页元素吗？

Question

问题很简单。在我的页面上，我有一个输入框，希望在使用键盘Tab键时忽略它。

我将此输入框作为简单的机器人蜜罐，并将其定位在页面外。所以目前，当使用Tab键时，用户看起来好像没有焦点移到该元素。

- thor

---

不要将其定位到页面之外，而是将其放在正常位置，并用另一个元素将其覆盖。 - Rex M

@Rex - 这将实现什么？它仍将在选项卡顺序中。 - Quentin

@David 还要设置 tabindex。 - Rex M

Answer 1

你可以在此元素上设置 tabindex="-1" 以便在 tab 键顺序中被忽略。 0 告诉浏览器自己计算该元素的 tab 键顺序，-1 告诉浏览器忽略该元素。

- Nick Craver

---

我们应该忽略元素吗？我想每个元素都可以通过Tab键访问，这对于无障碍性来说是至关重要的。 - MMalke

在当前标准中：https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute “-1使元素可聚焦，并表示作者希望该元素可通过单击进行聚焦，但不能按顺序聚焦。” - Ciro Santilli OurBigBook.com

Answer 2

您可以使用 tabindex 属性来定义 Tab 键遍历元素的顺序。如果将 tabindex="-1" 设置在元素上，则该元素将被跳过。

有关更多信息，请参见示例网站 http://www.webcheatsheet.com/HTML/controll_tab_order.php。

更新：根据评论，将 tabindex="0" 更改为 "-1"。

- mike

---

这只是解决方案的一部分 - 重点最终会落在元素上，只是稍后而已。 - Pekka

Tabindex=0 会导致元素按照正常规则进行索引-http://www.w3.org/TR/html5/editing.html#negative-tabindex-它用于将通常无法聚焦的元素添加到正常顺序中，而不是将它们排除在外。 - Quentin

+1 tabindex='-1' 确实完全有效（输入元素从旋转中出来）。删除我用JS方法的答案。 - Pekka

将tabindex设置为-1非常有效 - 感谢所有的回复和建议。 - thor

我无法让tabindex='-1'与display:none元素一起工作。 - Ben Sewards

Answer 3

display: none的作用是隐藏元素。

- Quentin

---

真的，但更高级的机器人可能会检查这一点（就像他们可能会检查将其定位在页面之外一样，但那是真正高级的）。 - Konerak

那是理论上可能的。但是，如果你将它屏幕外处理，那么屏幕阅读器会将其呈现给真正的用户。 - Quentin

我确实考虑过将显示设置为无，但我担心机器人会比定位到页面外更容易检查，就像Konerak所说的那样。我已经使用了一些屏幕阅读软件进行了测试，并注意到它显示为一个未标记的文本输入框。这显然是一个问题，但我认为我们现在不得不接受它，并稍后再重新审视它。 - thor

Answer 4

我使用了一个“禁用”标志来解决我的输入元素问题，因为在我的情况下不需要任何用户输入 :)

三个输入框的示例：

.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 上进行了测试。

- Hourglasser