Firefox 沒有將焦點設置為錨元素

Question

我在我的頁面上創建了一個跳轉到一個按鈕的跳轉到內容鏈接。 在 IE 和 Chrome 中，焦點設置在允許我使用 Enter 激活它的按鈕上。 然而，在 Firefox 中，它不會將焦點設置在按鈕上。 它似乎在按鈕之后聚焦，因為我需要 Shift+Tab（Tab 向后）才能聚焦在按鈕上。

<a href="#player__button">Skip to play button</a>

<button id="player__button">
  Play
</button>

我創建了一個小提琴https://jsfiddle.net/chadfawcett/p4t2wv21/5/ 。 您應該能夠通過 Tabbing 到Skip to play 按鈕鏈接，點擊Enter來重現該問題，這會將焦點放在按鈕上。 在 Chrome 和 IE 中，您可以反復按Enter 鍵來觸發 onclick 偵聽器。

Answer 1

這是 Firefox 中的一個已知錯誤，因為很多年（至少 2005 年）：

跟隨頁面上的錨鏈接失去焦點

視覺焦點已更改，但鍵盤焦點未更改

當 :target 不可聚焦時，Gecko 唯一正確且 Blink、WebKit 和 Trident 失敗的事情是更新“順序焦點導航起點”。

還有一個開放的類似錯誤涉及表單元素：

當 URI 指向它們時，表單控件應該獲得焦點（帶有片段標識符）

Answer 2

在寫這個問題時，我找到了一個 JS 解決方法，但我更喜歡 HTML 解決方案。 希望有人能提供更好的答案。

找到這個SO Question 后，我能夠通過使用 Javascript 設置焦點在 Firefox 中獲得所需的行為。

link.addEventListener('click', e => {
  e.preventDefault()
  button.focus()
})

https://jsfiddle.net/chadfawcett/p4t2wv21/8/

Answer 3

我很確定這可以解決您的問題。 它只是歸結為瀏覽器之間的代碼解釋，將代碼的語法更改為不那么模棱兩可/更通用是關鍵。

https://jsfiddle.net/ws88pwo6/3/

<button type="button" onclick="focusMethod()">Skip to play button</button>
<p></p>

<button id="player__button">
Play
</button>
<textarea id="output" disabled>

</textarea>

JS

const button = document.getElementById('player__button')
const output = document.getElementById('output')

focusMethod = function getFocus() {          
document.getElementById("player__button").focus();
}

player__button.onclick = function(){output.innerHTML += 'Button clicked\n'};