オートフォーカスの属性と履歴ナビゲーションの問題

私は、検索フィールドがヘッダーに置かれたページを持っています。この入力は、ユーザーがすぐに検索を開始できるように、自動的にフィールドにフォーカスを配置するために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>

これが正常に動作している間の歴史の中で前後に行くの問題があります。ユーザーがページをスクロールしてリンクをクリックしてからブラウザの履歴を使用して戻ると、元のページが検索入力がある場所の上部にスクロールします。

これは、履歴に戻るときにスクロール位置が変更されるべきでないため、使い勝手の問題です。これを避けるにはどうすればいいですか？

出典

2017-01-12 jor

HTML autofocus属性を使用する代わりに、ユーザーが[戻る]ボタンを使用してページに移動した場合はJSで確認します。そうでない場合にのみ、searchField.focus()と呼ぶでしょう。

問題は、私はdetect if the user clicked the “back” buttonに直接道を見ていません。ただし、getting the scroll positionを試してみてにスクロールした場合のみ045：

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

出典

2017-01-12 23:48:35

オートフォーカスの属性と履歴ナビゲーションの問題

答えて

関連する問題