单击时隐藏大纲焦点在链接上

【问题标题】：Hide outline focus on link when click单击时隐藏大纲焦点在链接上
【发布时间】：2014-08-23 07:29:19
【问题描述】：

单击链接时，我需要隐藏焦点轮廓。但是当我使用 tabindex 滑动链接时，我也需要显示它。一些网站使用任何特定的解决方法来执行此操作。这似乎是默认行为。但是在我的网站上，当我点击一个链接时，它也会显示大纲。仅当我使用 tabindex 键滑动链接时，如何才能显示他的大纲？提前致谢。赫尔穆特

【问题讨论】：

你目前有什么？删除轮廓是一个简单的 CSS 操作，在某些时候使用它可能会有点棘手，但看起来并非不可能。你读过this article 了吗？
是的，我知道我可以使用 css 属性删除大纲，但是当我按下 tabindex 键时，我需要显示它，就像谷歌主页一样。

标签： css hyperlink focus tabindex outline

【解决方案1】：

如果选项卡行为是您在调整 CSS 轮廓属性时特别需要检测的，我不相信 CSS 可以从 :focus 或 :active 等状态确定输入设备类型。

相反，您可以使用 CSS 隐藏页面上所有元素的轮廓：

a:focus, a:active {
  outline:0;
}
a.tabbed {
  outline:1px solid red;
}

然后，您将使用 JavaScript 调整某些通过 Tab 键获得焦点的元素的轮廓。

document.addEventListener('keyup', function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    var el = document.activeElement;

    if (code == 9 && el.tagName == 'A') {
        el.className = "tabbed";
    }
}, true);

我添加了一个简单的示例：http://codepen.io/anon/pen/aljsu

【讨论】：