Проблема с атрибутом автофокуса и навигацией по истории

У меня есть страница, где в шапке размещено поле поиска. В этом вводе используется атрибут 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>

Хотя это прекрасно работает, существует проблема при перемещении вперед и назад в истории. Если пользователь прокручивает мою страницу вниз и щелкает ссылку, а затем снова возвращается (используя историю браузера), моя исходная страница прокручивается вверх, где находится поле поиска.

Это недостаток удобства использования, потому что положение прокрутки не должно меняться при возврате в историю. Как мне этого избежать?


html autofocus usability
person jor    schedule 12.01.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо использования атрибута HTML autofocus вы могли бы проверить с помощью JS, перешел ли пользователь на вашу страницу с помощью кнопки возврата. Тогда только в том случае, если они НЕ сделали этого, вы бы позвонили searchField.focus().

Проблема в том, что я не вижу прямого способа определить, если пользователь нажал кнопку «назад». Однако вы можете попробовать получить позицию прокрутки и вызвать только .focus() если прокрутить 0 пикселей:

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