点击链接时隐藏轮廓焦点

Question

当我点击链接时，我需要隐藏焦点轮廓线。但是，当我使用tabindex滑动链接时，我也需要显示它。一些网站可以通过特定的解决方法来实现这一点。似乎这是默认行为。但是在我的网站上，当我点击链接时，它也会显示轮廓线。如何只在使用tabindex键滑动链接时显示轮廓线？谢谢。

- Hel00

---

你目前有什么？去掉轮廓线只需要简单的CSS操作，但在某些情况下可能会有一些棘手的问题，但看起来并不是不可能解决。你读过这篇文章了吗？（http://css-tricks.com/removing-the-dotted-outline/） - Laurent S.

是的，我知道可以使用CSS属性来删除轮廓线，但是我需要在按下tabindex键时显示它，就像Google主页一样。 - Hel00

Answer 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

- nwinch