2

当我在页面加载时尝试将焦点设置到输入元素时，在某些情况下它会因 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，或按 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栏并按下了Reload，而不是没有点击URL栏并按下Reload或点击了URL栏和按 Enter。真是一团糟！

火狐，我的意思是：

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

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

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

感谢收到任何更好的想法:)

4

1 回答 1

-1

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

于 2013-05-01T19:44:28.333 回答