Question

我有一个--release 8。

当我从文本字段中 Shift + Tab 时，我想重点关注<input type="text" />。在这种情况下，我不能依靠本机的制表符行为，因为我在li > a和目标<input />之间有一个我不想关注的锚元素。

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

但是在Chrome中，当我专注于<a />上的<input />和 Shift + Tab 时，焦点将移至最后一个<input />，但轮廓是看不见的。如果我再执行一次 Shift + Tab + Tab 放回B上，我现在将看到轮廓。

<a />

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

如果我删除了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" />

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

2 个答案: