Question

我之前从未注意到这一点，但如果设置了指向现有元素的哈希，似乎无法将输入字段集中在加载上。

为什么会这样？

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

<!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，无论是否设置了哈希值。

Answer 1

考虑此用例有4种情况：

当网址中没有哈希时，网页为loaded / refreshed

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

网址中的哈希值为appended，但网页不是reloaded / refreshed

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

当网址哈希
时，网页为loaded / refreshed

在这种情况下，Element.focus()可以在callback的{{1}}中调用。即使setTimeout也可以使用！

当网址中<em> 哈希但页面中不存在setTimeout(callback,0)时，网页为loaded / refreshed

在这种情况下，target正常工作

最后的想法：

要在任何方案中拥有Element.focus()永久元素，请在focus回调中使用setTimeout并使用 0的window.onload

delay

设置哈希时无法聚焦输入

1 个答案: