Question

我在页面上创建了一个Skip to Content链接，跳转到一个按钮。在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到跳过播放按钮链接重现问题，点击输入，这会将焦点放在按钮上。在Chrome和IE中，您可以反复按 Enter 以激活onclick侦听器。

Answer 1

这是Firefox中的一个已知错误，因为很多年（至少2005年）：

Following an on-page anchor link loses the focus

视觉焦点已更改，但键盘焦点未更改

Gecko唯一正确的做法是，Blink，WebKit和Trident失败的是在以下情况下更新“顺序焦点导航起点”：目标无法调焦。

还有一个与形式元素有关的开放式类似错误：

form controls should get focus when a URI points to them (with a fragment identifier)

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'};

Firefox没有将焦点设置为锚元素

3 个答案: