在搜索欄中添加這樣的提示信息, 可以引導訪客對網站進行搜索, 對技術類, 分享類網站尤其有效.

為了保持良好的用戶體驗, 我們一般會在搜索之后保留上次搜索的關鍵字, 如下圖是搜索 'WordPress' 關鍵字之后搜索欄的狀態.

關于搜索框,我認為有以下幾點需要注意

(1) 在建立搜索框的時候, value 的值應該是關鍵字傳值, 而不是搜索欄提示. 或許你會說, 很多人都將提示作為搜索欄的初始內容, 但我認為是不好的. 而 Google 和百度都是將上次搜索的關鍵字作為搜索欄初始化內容的. 所以我建議在有關鍵字的時候顯示關鍵字, 沒關鍵字的時候顯示提示.

(2) 如果輸入框沒有關鍵字內容, 當鼠標點擊搜索輸入框的時候, 我們要讓提示信息消失; 而當鼠標離開輸入框時, 重新顯示提示. 這就要求對輸入信息進行判斷, 如何判斷? 最簡單的方法是對比字符串, 所以這要求我們用一些不常用的文字串作為提示, 切記使用 "Search" 和 "搜索" 這些可能成為關鍵字的文字串作為提示.

(3) 如果搜索欄還提供一個提交按鈕, 那么在點擊提交按鈕的時候也要對搜索框內容進行檢測, 如果是提示信息, 則不進行搜索.

用 JavaScript 實現搜索框提示信息

下面是我在自用的 iNove 主題上添加提示信息的 jQuery 代碼, 請留意代碼注釋.

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表