問題與自動對焦屬性和歷史導航

我有一個頁面，其中一個搜索字段放在標題。此輸入使用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，並且僅在滾動時才撥打.focus() 0px：

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

問題與自動對焦屬性和歷史導航

回答

相關問題