以编程方式设置锚点时未显示焦点轮廓答案

【问题标题】：Focus outline not shown when set on anchor programmatically以编程方式设置锚点时未显示焦点轮廓
【发布时间】：2015-12-11 12:27:03
【问题描述】：

我有一个应用程序在某些情况下以编程方式将焦点设置在元素上。大多数情况下，这一切都很好，但是当我将焦点放在锚上时，例如$("#link1").focus()，我在 Firefox (v42.0) 中看不到焦点轮廓。焦点在元素上，因为我可以跳到下一个并查看轮廓。然后，当我返回时，我正确地看到了原始元素的轮廓。它可以在 Chrome 和 IE 上正常运行。

如果在设置焦点后，我在 Firefox 中切换到另一个选项卡并返回，则会显示轮廓。

当我调用 focus() 时，元素似乎没有正确刷新。

HTML 和 JS/jQuery 非常简单：

<a href="#" id="link1">Link 1</a>
<a href="#" id="link2">Link 2</a>

$("#link1").click(function(evt){
  evt.preventDefault();
  $("#link2").focus();
});

有人有什么想法吗？

http://jsfiddle.net/4xkh9y1o/1/

谢谢，

史蒂文

【问题讨论】：

你能编辑这个问题并发布你正在使用的代码吗？
stackoverflow.com/questions/7046798/…
这种解决方案似乎对我不起作用。 jsfiddle.net/4xkh9y1o
我也发生在 chrome 上

标签： javascript jquery html firefox

【解决方案1】：

我遇到了同样的问题，我可以说这是一个浏览器错误。看来，在 Firefox 呈现未以编程方式触发的焦点轮廓之前，它将无法显示以编程方式触发的焦点的轮廓。显示轮廓后，焦点轮廓也将显示为以编程方式触发的焦点。

请注意，这不仅限于锚元素。就我而言，它发生在<div tabindex="0">。

我确实找到了一种解决方法：为焦点轮廓指定明确的样式：

.programmatically-focused:focus {
    outline: 1px dotted;
}

为避免破坏其他浏览器中的默认焦点环样式，您可能希望将解决方法限制为 Firefox：

@-moz-document url-prefix() {
    .programmatically-focused:focus {
        outline: 1px dotted;
    }
}

这种风格似乎与我的环境中 FF 的内置焦点轮廓相匹配（Win7 上的 FF 43.0.1）。基于this page，FF Mac 似乎使用了相同的样式。它使用当前文本颜色作为轮廓。

以下是您使用解决方法的更新：http://jsfiddle.net/4xkh9y1o/4/

【讨论】：