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

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

 更新時(shí)間：2011年03月05日 23:41:55   作者：  
在輸入框里面預(yù)設(shè)一段提示文字，當(dāng)焦點(diǎn)在輸入框的時(shí)候清空這段文字，這在目前來(lái)說(shuō)已經(jīng)不是什么新鮮事了。

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

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

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

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

這段代碼有兩個(gè)很明顯的缺點(diǎn)：

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

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

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

  1. 良好的結(jié)構(gòu)性。既不是div不是span，對(duì)input的說(shuō)明就應(yīng)該用label。
  2. 良好的用戶體驗(yàn)。由于設(shè)置了for屬性，當(dāng)用戶點(diǎn)擊label的時(shí)候，就會(huì)自動(dòng)focus到輸入框。

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

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

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

javascript是簡(jiǎn)潔了，但用戶體驗(yàn)?zāi)?？在javascript執(zhí)行前，那段提示文字也是無(wú)論如何都不會(huì)消失，用戶也是想刪掉這段文字，但是他們刪不了，因?yàn)檫@些文字實(shí)際上并不在輸入框內(nèi)，而他們輸入的內(nèi)容會(huì)被提示文字擋住了。我個(gè)人認(rèn)為這給用戶帶來(lái)了很大的疑惑。

相關(guān)文章

最新評(píng)論