Question

我使用div属性制作了tabindex tabbable，以便隐藏内容。

目前，当使用鼠标点击时，div会获得浏览器:focus样式。

有没有办法让该tabbable元素在通过键盘访问时只有焦点样式？默认情况下，锚元素具有此功能。

带有Div的
tabindex='0'可在鼠标和键盘上获得浏览器焦点样式互动

Anchor在键盘交互中获取浏览器焦点样式仅

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

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

编辑 - ＆gt;以下是一个示例：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

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

失去焦点的

onclick="this.blur()"

设置焦点

onclick="this.focus()"

DIV点击失去焦点且A设置为焦点http://jsfiddle.net/LvXyL/6/

的示例

如果您长按鼠标键，则缺点是可见焦点样式。

Answer 4

我建议不要专门针对div，p，span 这样的标记

让我们编写一个公共选择器以实现所有元素的这一功能。

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

如果您想具体一点，我建议您这样做。

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

Tabindex焦点样式

4 个答案: