欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

WordPress 搜索框添加文字提示的方法

  發(fā)布時間：2011-05-10 00:08:27   作者：佚名   我要評論
在瀏覽網頁的時候, 我們經常會看到很多人在他們網站的搜索欄里顯示文字提示, 當鼠標點擊搜索欄, 則提示信息消失.
如在 Nicky 的博客中, 我發(fā)現了下圖中的搜索欄.

Searchbox in iBlue

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

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

Searchbox in iNove

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

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

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

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

用 JavaScript 實現搜索框提示信息

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

復制代碼
代碼如下:

jQuery(document).ready(
function(){
// 當鼠標聚焦在搜索框
jQuery('#searchbox .textfield').focus(
function() {
// 如果搜索框的內容是 "Type text to search here...", 文字顏色變深, 內容清空.
if(jQuery(this).val() == 'Type text to search here...') {
jQuery(this).css({color:"#555"}).val('');
}
}
// 當鼠標在搜索框失去焦點
).blur(
function(){
// 如果搜索框的內容是空, 則文字顏色變淺, 顯示 "Type text to search here..." 字樣.
if(jQuery(this).val() == '') {
jQuery(this).css({color:"#999"}).val('Type text to search here...');
}
}
);
// 當點擊搜索按鈕時
jQuery('#searchbox .button').click(
function() {
// 如果搜索框內容是 "Type text to search here..." 或者是空, 不進行任何操作.
if(jQuery('#searchbox .textfield').val() == '' || jQuery('#searchbox .textfield').val() == 'Type text to search here...') {
return false;
// 否則提交并進行搜索
} else {
jQuery(this).submit();
}
}
);
// DOM 加載完畢時發(fā)生的事件
jQuery(
function() {
// 如果搜索框內容是 "Type text to search here..." 或者是空, 文字顏色變淺, 顯示 "Type text to search here..." 字樣.
if(jQuery('#searchbox .textfield').val() == '' || jQuery('#searchbox .textfield').val() == 'Type text to search here...') {
jQuery('#searchbox .textfield').css({color:"#999"}).val('Type text to search here...');
}
}
);
}
)

原理很簡單, 用純 JS 實現只是為了維護方便, 你可以選擇其他方法. 我并沒有在發(fā)布的主題中添加這個功能是因為 JS 實現的代碼做不了國際化, 實在有點尷尬. 如果你真的喜歡, 可以自己嘗試實現一下.

相關文章

最新評論