淘寶搜索框效果實現(xiàn)分析

更新時間：2011年03月05日 23:41:55 作者：

在輸入框里面預設(shè)一段提示文字，當焦點在輸入框的時候清空這段文字，這在目前來說已經(jīng)不是什么新鮮事了。

淘寶的搜索框就用到了這樣一種設(shè)計：

這種設(shè)計一般是用javascript監(jiān)控了輸入框的focus和blur事件：

復制代碼代碼如下:

 
<input type="text" id="q" value="請輸入關(guān)鍵字" /> 
<script type="text/javascript">//<![CDATA[ 
$("#q").onfocus = function() { 
　　if ("請輸入關(guān)鍵字" == this.value) { 
　　　　this.value = ""; 
　　} 
}; 
$("#q").onblur = function() { 
　　if ("" == this.value) { 
　　　　this.value = "請輸入關(guān)鍵字"; 
　　} 
}; 
//]]></script> 

這段代碼有兩個很明顯的缺點：

“請輸入關(guān)鍵字”這段提示共出現(xiàn)了3次，一旦要改這段文字就得改3個地方，維護顯得非常不便。
為了性能優(yōu)化，我們會把javascript部分放到頁面末尾。然而，像門戶網(wǎng)站首頁這種代碼量很大的頁面，末尾的javascript很可能會延時1-2秒執(zhí)行。在這段時間內(nèi)，即使焦點在輸入框內(nèi)，提示文字也不會消失，用戶需要手動刪除這段文字再輸入內(nèi)容。

淘寶的輸入框則采取了另一種做法，它不把這段提示文字作為輸入框的value值，而是放在另一個標簽內(nèi)，再用絕對定位把這段文字疊到輸入框上：

從上面的代碼可以看到，提示文字在label標簽內(nèi)，這樣做有兩個好處：

良好的結(jié)構(gòu)性。既不是div不是span，對input的說明就應(yīng)該用label。
良好的用戶體驗。由于設(shè)置了for屬性，當用戶點擊label的時候，就會自動focus到輸入框。

javascript要控制的其實就是label的顯示和隱藏，再也不需要管那段提示文字的內(nèi)容了：

復制代碼代碼如下:

 
$("#q").onfocus = function() { 
　　$("label[for=q]")[0].style.display = 'none'; 
}; 
$("#q").onblur = function() { 
　　if ("" == this.value) { 
　　　　$("label[for=q]")[0].style.display = ''; 
　　} 
}; 

javascript是簡潔了，但用戶體驗呢？在javascript執(zhí)行前，那段提示文字也是無論如何都不會消失，用戶也是想刪掉這段文字，但是他們刪不了，因為這些文字實際上并不在輸入框內(nèi)，而他們輸入的內(nèi)容會被提示文字擋住了。我個人認為這給用戶帶來了很大的疑惑。