Question

我有一个应用程序，在某些情况下以编程方式设置焦点元素。大多数情况下一切正常，但是当我将焦点放在锚点上时，例如$（＆＃34;＃link1＆＃34;）。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）。基于this page，FF Mac似乎使用相同的样式。它使用当前文本颜色作为轮廓。

以下是您操作变通方法的更新内容：http://jsfiddle.net/4xkh9y1o/4/

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

1 个答案: