Tabindex 焦点样式答案

【问题标题】：Tabindex Focus StylesTabindex 焦点样式
【发布时间】：2020-08-07 02:04:32
【问题描述】：

我使用tabindex 属性创建了一个div 可选项卡，以使隐藏的内容可以访问。

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

有没有办法让该可选项卡元素只有在通过键盘访问时具有焦点样式？锚元素默认有这个。

Div 和 tabindex='0' 在鼠标和键盘上获取浏览器焦点样式互动
Anchor 在键盘交互时获得浏览器焦点样式仅限

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

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

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

【问题讨论】：

FWIW：看起来你描述的行为实际上是依赖于浏览器的：在 Chrome 中，div 获得鼠标/键盘的焦点样式，但只锚定在你描述的键盘上；但在 IE 中，both 获取鼠标或键盘上的焦点矩形；同时在 Firefox 中，直到在该帧中使用键盘，都没有获得焦点轮廓，之后都获得鼠标或键盘的焦点轮廓！

标签： html css accessibility

【解决方案1】：

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

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

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

【讨论】：

因为他只想通过键盘而不是鼠标设置焦点。
如果用户关闭了 JS 会发生什么？这种方法涵盖了鼠标和键盘。
我希望保留默认的浏览器焦点样式，并且焦点只显示键盘导航。

【解决方案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;
}

【讨论】：

【解决方案3】：

我建议不要特别关注div、p、span等标签

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

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

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

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

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：

感谢您的回复，这已经很接近了，但焦点仍然在鼠标按下以及单击并拖动元素时。
不推荐使用 this.blur()，因为它会干扰正确的键盘使用。单击可选项卡的 div 应该将焦点设置在那里，但使用 this.blur() 可以防止这种情况发生。