亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

Searchbox in iBlue

在搜索欄中添加這樣的提示信息, 可以引導(dǎo)訪客對網(wǎng)站進(jìn)行搜索, 對技術(shù)類, 分享類網(wǎng)站尤其有效.

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

Searchbox in iNove

關(guān)于搜索框,我認(rèn)為有以下幾點(diǎn)需要注意

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

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

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

用 JavaScript 實(shí)現(xiàn)搜索框提示信息

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

復(fù)制代碼
代碼如下:

jQuery(document).ready(
function(){
// 當(dāng)鼠標(biāo)聚焦在搜索框
jQuery('#searchbox .textfield').focus(
function() {
// 如果搜索框的內(nèi)容是 "Type text to search here...", 文字顏色變深, 內(nèi)容清空.
if(jQuery(this).val() == 'Type text to search here...') {
jQuery(this).css({color:"#555"}).val('');
}
}
// 當(dāng)鼠標(biāo)在搜索框失去焦點(diǎn)
).blur(
function(){
// 如果搜索框的內(nèi)容是空, 則文字顏色變淺, 顯示 "Type text to search here..." 字樣.
if(jQuery(this).val() == '') {
jQuery(this).css({color:"#999"}).val('Type text to search here...');
}
}
);
// 當(dāng)點(diǎn)擊搜索按鈕時(shí)
jQuery('#searchbox .button').click(
function() {
// 如果搜索框內(nèi)容是 "Type text to search here..." 或者是空, 不進(jìn)行任何操作.
if(jQuery('#searchbox .textfield').val() == '' || jQuery('#searchbox .textfield').val() == 'Type text to search here...') {
return false;
// 否則提交并進(jìn)行搜索
} else {
jQuery(this).submit();
}
}
);
// DOM 加載完畢時(shí)發(fā)生的事件
jQuery(
function() {
// 如果搜索框內(nèi)容是 "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 實(shí)現(xiàn)只是為了維護(hù)方便, 你可以選擇其他方法. 我并沒有在發(fā)布的主題中添加這個(gè)功能是因?yàn)?JS 實(shí)現(xiàn)的代碼做不了國際化, 實(shí)在有點(diǎn)尷尬. 如果你真的喜歡, 可以自己嘗試實(shí)現(xiàn)一下.

相關(guān)文章

最新評論