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

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

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

Searchbox in iBlue

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

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

Searchbox in iNove

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

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

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

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

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

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

復(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...');
}
}
);
}
)

原理很簡(jiǎn)單, 用純 JS 實(shí)現(xiàn)只是為了維護(hù)方便, 你可以選擇其他方法. 我并沒(méi)有在發(fā)布的主題中添加這個(gè)功能是因?yàn)?JS 實(shí)現(xiàn)的代碼做不了國(guó)際化, 實(shí)在有點(diǎn)尷尬. 如果你真的喜歡, 可以自己嘗試實(shí)現(xiàn)一下.

相關(guān)文章

最新評(píng)論