Question

我有一个页面，其中一个搜索字段放在标题中。此输入使用autofocus属性自动将焦点放入字段，以便用户可以立即开始搜索：

<html>
  <head><title>autofocus issue</title></head>
  <body>
    <header>
      <form method="post">
        <input name="search" autofocus />
      </form>
    </header>
    <article>
      <p>Lots of contents here, so that the next link
         can only be reached by scrolling down ...</p>
      <a href="http://link.to/some/page">Go somewhere</a>
    </article>
  </body>
</html>

虽然这种方法很好但是在历史上前后都有问题。如果用户向下滚动页面并单击链接然后再返回（使用浏览器历史记录），我的原始页面将滚动到搜索输入所在的顶部。

这是一个可用性缺陷，因为在历史回溯时滚动位置不应该改变。我该如何避免这种情况？

Answer 1

如果用户通过后退按钮导航到您的页面，则不希望使用HTML autofocus属性。然后，只有他们没有，你才会打电话给searchField.focus()。

问题是，我看不到detect if the user clicked the “back” button的直接方式。但是，您可以尝试getting the scroll position，仅在滚动0px时调用.focus()：

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if (scrollTop === 0) {
    searchField.focus();
}

自动对焦属性和历史记录导航问题

1 个答案: