淘寶搜索框效果實現(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)容會被提示文字擋住了。我個人認為這給用戶帶來了很大的疑惑。
相關(guān)文章
在日常前端開發(fā)過程中，常用到頁面列表加載。這篇文章主要為大家介紹三種常用方法，分別是分頁加載、按鈕加載以及滾動加載，需要的可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)電影App導航和輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
在JavaScript中,判斷一個對象是否為空可以有多種方法,這篇文章主要為大家詳細介紹了幾種常見的方法,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
分包指的是把一個完整的小程序項目，按照不同的需求劃分為不同的子包，在構(gòu)建時打包成不同的分包，用戶在瀏覽時按需加載，這篇文章主要介紹了uni-app做微信小程序的分包處理,需要的朋友可以參考下2023-02-02
JavaScript中的apply()方法和call()方法使用介紹
我們發(fā)現(xiàn)apply()和call()的真正用武之地是能夠擴充函數(shù)賴以運行的作用域，如果我們想用傳統(tǒng)的方法實現(xiàn)2012-07-07
JS實現(xiàn)多級菜單中當前菜單不隨頁面跳轉(zhuǎn)樣式而發(fā)生變化
本文介紹了JQuery巧妙實現(xiàn)多級菜單中當前菜單不隨頁面跳轉(zhuǎn)樣式發(fā)生變化，實現(xiàn)方法非常簡單，感興趣的朋友一起看看吧2017-05-05
JScript內(nèi)置對象Array中元素的刪除方法...2007-03-03
這篇文章主要給大家介紹了關(guān)于如何利用d3.js實現(xiàn)蜂巢圖表帶動畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用d3.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
微信小程序 websocket 實現(xiàn)SpringMVC+Spring+Mybatis
這篇文章主要介紹了 微信小程序websocket實現(xiàn)SpringMVC+Spring+Mybatis的相關(guān)資料,這里提供實現(xiàn)思路及實現(xiàn)代碼，需要的朋友可以參考下2017-08-08
這是一個帶變形動畫特效的下拉導航菜單特效。該導航菜單在菜單項之間切換時，下拉菜單會快速的根據(jù)菜單內(nèi)容的大小來動態(tài)變形，顯示合適的下拉菜單大小，效果非常棒，對導航下拉菜單效果感興趣的朋友一起通過本文學習吧2016-10-10