2021-7-19 前端達(dá)人
input輸入框在獲得或失去焦點(diǎn)時(shí)隱藏或顯示文字，這樣的焦點(diǎn)效果想必很多朋友在填寫(xiě)form表格的時(shí)候都曾見(jiàn)識(shí)過(guò)吧，本文使用jquery實(shí)現(xiàn)以下，感興趣的朋友可以參考下哈
大家可以看效果圖的搜索輸入框，默認(rèn)顯示著“用戶(hù)名/Email”的提示，當(dāng)這個(gè) input 輸入框獲得焦點(diǎn)時(shí)，就自動(dòng)清空等待用戶(hù)輸入，當(dāng)用戶(hù)啥也沒(méi)輸入就離開(kāi)這個(gè) input 輸入框時(shí)，輸入框內(nèi)又再次顯示“用戶(hù)名/Email”的提示。是不是很常見(jiàn)？很多搜索、登錄、表單都會(huì)用到這個(gè)效果，但是我看了N多個(gè)網(wǎng)站，有90%以上是這么實(shí)現(xiàn)的：
<input type="text" value="搜索關(guān)鍵字" onfocus="if(this.value == '搜索關(guān)鍵字') this.value = ''" onblur="if(this.value =='') this.value = '搜索關(guān)鍵字'" />
我是非常反對(duì)把 javascript 寫(xiě)在 html 標(biāo)簽里的，這和 style 寫(xiě)在 html 標(biāo)簽里一樣，雖然不違反 W3C 標(biāo)準(zhǔn)，但也不推薦這么寫(xiě)。因?yàn)椋?nbsp;
1.完全沒(méi)有復(fù)用性可言，如果是個(gè)表單，輸入框很多，每個(gè)都需要這樣的效果，那就每個(gè)都這么處理嗎？
2.如果要修改其中的提示文字，費(fèi)時(shí)費(fèi)力又不好維護(hù)。
3.我們倡導(dǎo)結(jié)構(gòu)（html）、表現(xiàn)（css）、行為（javascript）三者分離，這才是一個(gè)好的頁(yè)面。
那要怎么寫(xiě)才能實(shí)現(xiàn)這個(gè)效果，而且既有復(fù)用性，又好維護(hù)，又不需要把 js 寫(xiě)進(jìn) html 里呢？
具體方法如下:
首先肯定是引入jQuery
Html代碼:
<div><input type="text" value="提示測(cè)試" class="input_test" /></div> <div><input type="text" value="請(qǐng)輸入搜索關(guān)鍵" class="input_test" /></div>
jQuery代碼:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.input_test').bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue; } } }); }) </script>
只要在實(shí)現(xiàn)的input輸入框加上”input_test”這個(gè)class就可以輕松實(shí)現(xiàn)了
文章來(lái)源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.lzhte.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.lzhte.cn