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

Question

我有一个应用程序，在某些情况下以编程方式将重点放在元素上。 大多数情况下，它们都可以正常工作，但是当我将焦点设置在锚点上时，例如$（“＃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/

谢谢，

史蒂芬

Answer 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）。 根据此页面 ，看来FF Mac使用相同的样式。 它使用当前文本颜色作为轮廓。

这是您的小提琴的更新，其中包括正在使用的解决方法： http : //jsfiddle.net/4xkh9y1o/4/