Question

当我在页面加载时尝试将焦点设置为输入元素时，在某些情况下它会因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：

将光标放在URL栏中，然后按Enter;
将光标放在输入文本中，然后按Enter，或按“重新加载”按钮，或按Ctrl-R（在Windows和Linux上，在Mac上为Cmd-R）。

但如果您将光标放在URL栏中并按下重新加载按钮，或按Ctrl-R（在Windows和Linux上，Mac上的Cmd-R），在Firefox中不起作用。您可以在console.log中看到DOM认为activeElement 是输入，但在2种情况下不是这样：

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

所以DOM现在处于混乱状态（这导致我的应用程序出现严重问题！）只是因为用户点击了URL栏并按了重新加载而不是不点击URL栏并按下重新加载或点击URL栏并按Enter键。真糟糕！

通过Firefox，我的意思是：

Linux和Mac上的FF15;
Windows和Linux上的FF10;
Windows上的FF9。

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

我唯一的“解决方案”是在.focus（）之前引入alert（）。不太满意！我该怎么处理警报？ “Firefox bug解决方法，请按OK！”。

感激地收到任何更好的想法：）

Answer 1

使用window.focus（）进行初始化;似乎把焦点从地址栏中拉出来。

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

1 个答案: