logo标签列表

当设置了哈希值时，无法聚焦输入。

javascripthtmlformsfocus
3

我以前从未注意到这一点，但似乎在设置指向现有元素的哈希值时，不能在加载时将输入字段聚焦。

为什么会这样呢？

看看这个非常基本的例子：

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>Focus test</title>
    </head>
    <body>
        <div id="bar">
            <input name="foo">
        </div>
        <script>
            console.log(document.activeElement);
            document.getElementsByTagName('input')[0].focus();
            console.log(document.activeElement);
        </script>
    </body>
</html>

如果您在Chrome中加载该页面，输入框将获得焦点。如果您将哈希设置为＃bar并重新加载页面，则输入框不会获得焦点。如果您将哈希设置为＃non-existing-element，则输入框再次获得焦点。activeElement会说无论是否设置了哈希，先是body，然后是input，这很奇怪。
什么是问题？期望的行为是什么？ - Rayon
为什么在设置哈希时无法聚焦输入字段是问题所在。预期行为是输入框获得焦点。 - powerbuoy
浏览器如何确定首选项？URL中的“哈希”呢？我无法提供令人信服的参考，但它应该是这样的行为...在setTimeout之后设置focus会有所帮助！ - Rayon
好的，你的意思是当哈希设置时，同时我聚焦到另一个元素上，浏览器就不知道哪个元素应该真正获得焦点了？但我很困惑为什么document.activeElement从来没有指向哈希中设置的元素。而且我也不知道设置哈希和聚焦元素是一样的。给input一个id并将哈希指向它并不会使其获得焦点，所以我不明白它们怎么会是一回事。 - powerbuoy
@Rayon使用setTimeout可以工作！:)非常感谢。请在答案中发布它，我会给你信用。 - powerbuoy
1个回答
2

考虑到这个用例，有4种情况:

  1. 当URL中没有哈希值时，页面被加载/刷新

在这种情况下，Element.focus()正常工作。

  1. 当URL中添加了哈希值但页面未被重新加载/刷新

在这种情况下，可以使用HashChangeEvent设置元素的focus。

  1. 当URL中存在哈希值且页面被加载/刷新

在这种情况下，如果在setTimeout的回调函数中调用Element.focus()，则可以正常工作。即使是setTimeout(callback, 0)也可以！

  1. 当URL中存在哈希值但target在页面中不存在时，页面被加载/刷新

在这种情况下，Element.focus()正常工作。

最后一点:

为了在任何情况下都有元素的focus，请在window.onload回调中使用延迟为0的setTimeout。

window.onload = function () {
  setTimeout(function () {
    document.getElementsByTagName('input')[0].focus();
    console.log(document.activeElement);
  }, 0);
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接