3

这确实是一个基本问题，但我找不到答案。我的 CSS 看起来像这样；

a:focus, button:focus{outline:3px solid #000;}

我想要的是仅当用户使用键盘选项卡到这些元素时才应用焦点。

这正是它在 Chrome 中的工作方式，但在 FF 和 IE 中，大纲显示用户单击元素时。这不是我想要的。

Chrome 真的错了吗？我试图保持简单并避免使用 Javascript 是可能的。我怎样才能让大纲仅在用户在页面周围进行选项卡时显示？

浏览器仅限 IE8+、FF 和 Chrome。

谢谢你的帮助！

4

3 回答 3

1

好吧，我知道如果可能的话我说没有 JS，但我不想再花时间在这上面了……所以对于任何感兴趣的人来说，这就是我所做的

$("a, button, select, input[type=submit], input[type=text]").keyup(function(){
    $(this).addClass("focusOutline");
}).blur(function(){
    $(this).removeClass("focusOutline");
});

哪个做得很好。有时有人

于 2013-11-06T23:37:54.113 回答
1

使用:focus-visible。它目前是 W3C 提案，用于使用 CSS 设置纯键盘焦点样式。在主流浏览器支持之前，你可以使用这个强大的 polyfill。

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

我还写了一篇更详细的帖子，以防您需要更多信息。

于 2018-05-28T17:05:46.930 回答
0

我在其他地方以不同的方式这样做，并认为我会在这里添加它作为任何偶然发现它的人的替代解决方案：

/**
* If user hits tab key then we add a class to <html> that lets us use
* additional styling hints to show focus etc.
*/

function detectTabKey() {
    $(document).keydown(function(e) {
        if (e.keyCode === 9) {
            $('html').addClass('is-tab-user');
        }
    });
}
于 2016-06-29T10:03:45.847 回答