使用 keydown 处理程序控制焦点时，焦点轮廓在 Chrome 中不可见

Question

我有一个<input type="text" />。

当我从文本字段中 Shift+Tab 时，我想专注于 li > a。在这种情况下，我不能依赖原生选项卡行为，因为我在 <input /> 和目标 <a /> 之间有一个锚元素，我不想关注它。

因此，我添加了一个 keydown 侦听器，将焦点强制集中到我关心的 <a />。

然而，在 Chrome 中，当我关注 <input /> 和 <input /> 中的 Shift+Tab 时，焦点转到最后一个 <a />，但轮廓不可见。如果我再次执行 Shift+Tab + Tab 以回到 B，我现在可以看到轮廓。

document.getElementById("f").addEventListener("keydown", (e) => {
  if (e.key === "Tab" && e.shiftKey) {
      e.preventDefault();
      document.querySelector("#list1 > li:last-child > a").focus();
  }
});

<ul id="list1">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
</ul>

<a href="#" />
<input id="f" />

如果我删除 keydown 处理程序和文本字段和我想要聚焦的目标锚点之间的锚元素，焦点轮廓将正确呈现。

这是一个已知的 Chrome 错误，是否有任何解决方法？ （使用 Chrome 74）

Answer 1

您可以使用tabindex 属性防止其他锚获得焦点。这是一个例子：

<ul id="list1">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
</ul>

<a href="#" tabindex="-1"/>
<input id="f" />

这可能不适用于所有浏览器。

Answer 2

您可以考虑删除e.preventDefault();，然后等待几毫秒再设置焦点：

document.getElementById("f").addEventListener("keydown", function (e) {
    if (e.key === "Tab" && e.shiftKey) {
        setTimeout(function() {
            document.querySelector("#list1 > li:last-child > a").focus();
        }, 10);
    }
});

<ul id="list1">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
</ul>

<a href="#" />
<input id="f" />