当焦点在地址栏中开始时，Firefox 焦点转换失败答案

【问题标题】：Firefox focus transition failure when focus starts in address bar当焦点在地址栏中开始时，Firefox 焦点转换失败
【发布时间】：2012-10-03 15:11:56
【问题描述】：

当我在页面加载时尝试将焦点设置到输入元素时，在某些情况下它会在 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 上，Cmd-R 在 Mac 上）。

但如果将光标放在 URL 栏中并按“重新加载”按钮或按 Ctrl-R（在 Windows 和 Linux 上，在 Mac 上为 Cmd-R），它不在 Firefox 中工作.您可以从 console.log 中看到 DOM 认为 activeElement 是输入，但这在 2 种意义上是不正确的：

CSS 输入选择器未激活；
输入元素尚未收到焦点事件。

所以 DOM 现在处于混乱状态（这在我的应用程序中造成了严重的问题！）只是因为用户点击了 URL 栏并按下了重新加载，而不是没有单击 URL 栏并按下重新加载或单击URL 栏并按 Enter。真是一团糟！

我的意思是 Firefox：

Linux 和 Mac 上的 FF15；
FF10 在 Windows 和 Linux 上；
Windows 上的 FF9。

它适用于我尝试过的每个版本的 Chrome 和 Safari。

我唯一的“解决方案”是在 .focus() 之前引入一个 alert()。不是很满意！我应该在警报中添加什么？ “Firefox 错误解决方法，请按 OK！”。

如果有更好的想法，感激不尽:)

【问题讨论】：

标签： javascript firefox focus onload address-bar

【解决方案1】：

用 window.focus() 初始化；似乎将焦点从地址栏推出。

【讨论】：