html - Tabindex 焦点样式

Question

我已经div使用该属性制作了一个 tabbable，tabindex以使隐藏的内容可以访问。

当前，当用鼠标单击时，div获取浏览器:focus样式。

有没有办法让可选项卡元素仅在通过键盘访问时才具有焦点样式？默认情况下，锚元素具有此功能。

• Divwithtabindex='0'获取鼠标和键盘交互的浏览器焦点样式
• Anchor 仅在键盘交互上获得浏览器焦点样式

我希望 div 模拟锚。不幸的是，让它成为锚不是一种选择。

任何帮助都会很棒，我真的很茫然。

编辑->这是一个例子：http: //jsfiddle.net/LvXyL/2/

Answer 1

当然只需将 :focus 伪类添加到 div 和样式中。我建议使用轮廓与边框。我更新了小提琴。

div:focus {outline: blue solid 2px;}

Kub 提出了一个 JS 解决方案，但是如果你真的不需要，为什么要使用 js 呢？

Answer 2

我在使用 javascript 向正文中添加/删除一个类来指示用户是使用鼠标还是键盘时取得了巨大的成功。使用这些类来根据需要设置焦点状态的样式。

document.addEventListener("mousedown", () => {
  document.body.classList.add("using-mouse")
  document.body.classList.remove("using-keyboard")
})

document.addEventListener("keydown", () => {
  document.body.classList.add("using-keyboard")
  document.body.classList.remove("using-mouse")
})

在 css 中，您可以执行以下操作：

.using-mouse :focus {
  outline: none;
}

.using-keyboard :focus {
  outline: auto 5px blue;
}

Answer 3

我建议不要特别关注诸如div, p,之类的标签span

让我们编写一个通用选择器来为所有元素实现此功能。

*:focus {
   outline: blue solid 2px;
}

如果你想具体一点，我会推荐这个。

*[tabindex]:focus {
    outline: 2px green solid;
}

Answer 4

如果您可以使用javascript，请尝试使用onclick属性。

onclick="this.blur()"失去焦点

onclick="this.focus()"用于设置焦点

DIV单击失去焦点并A设置焦点的示例http://jsfiddle.net/LvXyL/6/

如果您长时间按住鼠标键，缺点是可见的焦点样式。