当我尝试在页面加载时将焦点设置到输入元素时，Firefox 在某些情况下会失败。这是代码:
:focus {
outline: 3px solid #ff0000;
}
<script type="text/javascript">
function setFocus() {
document.getElementById('input-id').focus();
document.getElementById('input-id').select();
console.log(document.activeElement);
}
</script>
<body onload="setFocus()">
<div><input id="input-id" type="text" value="Waiting for focus..." onfocus="console.log('Received focus!')" /></div>
</body>
在这里试试:http://jsfiddle.net/johnericsutton/p6VhQ/ .这个想法很简单，当页面加载时，输入元素获得焦点(并且文本被选中)。
在这些情况下它在 Firefox 中工作:
- 将光标置于地址栏中并回车；
- 将光标放在输入文本中并按 Enter，或按 Reload 按钮，或按 Ctrl-R(在 Windows 和 Linux 上，在 Mac 上按 Cmd-R)。
但如果您将光标放在 URL 栏中并按下“重新加载”按钮，或者按下 Ctrl-R(在 Windows 和 Linux 上，在 Mac 上按下 Cmd-R)，它在 Firefox 中不起作用 .您可以从 console.log 中看到 DOM 认为 activeElement 是输入，但这在两种意义上是不正确的:
- CSS 输入选择器未激活；
- 输入元素没有收到焦点事件。
所以 DOM 现在处于困惑状态(这在我的应用程序中造成了严重的问题!)只是因为用户单击了 URL 栏并按下了重新加载，而不是没有单击 URL 栏并按下了重新加载或单击了URL 栏并按 Enter。真是一团糟!
对于 Firefox，我的意思是:
- Linux 和 Mac 上的 FF15；
- Windows 和 Linux 上的 FF10；
- Windows 上的 FF9。
它在我尝试过的每个版本的 Chrome 和 Safari 上都运行良好。
我唯一的“解决方案”是在 .focus() 之前引入一个 alert()。不是很满意!我应该在警报中放什么？ “Firefox 错误解决方法，请按确定!”。
感谢收到任何更好的想法:)
最佳答案
用 window.focus() 初始化；似乎将焦点推出了地址栏。
关于javascript - 当焦点在地址栏中开始时，Firefox 焦点转换失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12711466/