javascript - 使用Keydown处理程序控制焦点时，Chrome中的焦点轮廓不可见

我有一个<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处理程序和anchor元素，则聚焦轮廓将正确呈现。

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

最佳答案

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

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

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

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

关于javascript - 使用Keydown处理程序控制焦点时，Chrome中的焦点轮廓不可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56550159/