以編程方式設置錨點時未顯示焦點輪廓

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/