input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
更新時(shí)間：2013年04月02日 15:57:02 作者：
input輸入框在獲得或失去焦點(diǎn)時(shí)隱藏或顯示文字，這樣的焦點(diǎn)效果想必很多朋友在填寫form表格的時(shí)候都曾見識過吧，本文使用jquery實(shí)現(xiàn)以下，感興趣的朋友可以參考下哈
input 輸入框獲得和失去焦點(diǎn)時(shí)隱藏或者顯示文字我們先看下效果圖
輸入框默認(rèn)狀態(tài):
輸入框獲取焦點(diǎn)狀態(tài):
大家可以看效果圖的搜索輸入框，默認(rèn)顯示著“用戶名/Email”的提示，當(dāng)這個(gè) input 輸入框獲得焦點(diǎn)時(shí)，就自動清空等待用戶輸入，當(dāng)用戶啥也沒輸入就離開這個(gè) input 輸入框時(shí)，輸入框內(nèi)又再次顯示“用戶名/Email”的提示。是不是很常見？很多搜索、登錄、表單都會用到這個(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)鍵字'" />
我是非常反對把 javascript 寫在 html 標(biāo)簽里的，這和 style 寫在 html 標(biāo)簽里一樣，雖然不違反 W3C 標(biāo)準(zhǔn)，但也不推薦這么寫。因?yàn)椋?
1.完全沒有復(fù)用性可言，如果是個(gè)表單，輸入框很多，每個(gè)都需要這樣的效果，那就每個(gè)都這么處理嗎？
2.如果要修改其中的提示文字，費(fèi)時(shí)費(fèi)力又不好維護(hù)。
3.我們倡導(dǎo)結(jié)構(gòu)（html）、表現(xiàn)（css）、行為（javascript）三者分離，這才是一個(gè)好的頁面。
那要怎么寫才能實(shí)現(xiàn)這個(gè)效果，而且既有復(fù)用性，又好維護(hù)，又不需要把 js 寫進(jìn) html 里呢？
具體方法如下:
首先肯定是引入jQuery
Html代碼:
<div><input type="text" value="提示測試" class="input_test" /></div>
<div><input type="text" value="請輸入搜索關(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)了
查看:Demo
輸入框默認(rèn)狀態(tài):
輸入框獲取焦點(diǎn)狀態(tài):
大家可以看效果圖的搜索輸入框，默認(rèn)顯示著“用戶名/Email”的提示，當(dāng)這個(gè) input 輸入框獲得焦點(diǎn)時(shí)，就自動清空等待用戶輸入，當(dāng)用戶啥也沒輸入就離開這個(gè) input 輸入框時(shí)，輸入框內(nèi)又再次顯示“用戶名/Email”的提示。是不是很常見？很多搜索、登錄、表單都會用到這個(gè)效果，但是我看了N多個(gè)網(wǎng)站，有90%以上是這么實(shí)現(xiàn)的：
復(fù)制代碼 代碼如下:
<input type="text" value="搜索關(guān)鍵字" onfocus="if(this.value == '搜索關(guān)鍵字') this.value = ''" onblur="if(this.value =='') this.value = '搜索關(guān)鍵字'" />
我是非常反對把 javascript 寫在 html 標(biāo)簽里的，這和 style 寫在 html 標(biāo)簽里一樣，雖然不違反 W3C 標(biāo)準(zhǔn)，但也不推薦這么寫。因?yàn)椋?
1.完全沒有復(fù)用性可言，如果是個(gè)表單，輸入框很多，每個(gè)都需要這樣的效果，那就每個(gè)都這么處理嗎？
2.如果要修改其中的提示文字，費(fèi)時(shí)費(fèi)力又不好維護(hù)。
3.我們倡導(dǎo)結(jié)構(gòu)（html）、表現(xiàn)（css）、行為（javascript）三者分離，這才是一個(gè)好的頁面。
那要怎么寫才能實(shí)現(xiàn)這個(gè)效果，而且既有復(fù)用性，又好維護(hù)，又不需要把 js 寫進(jìn) html 里呢？
具體方法如下:
首先肯定是引入jQuery
Html代碼:
復(fù)制代碼 代碼如下:
<div><input type="text" value="提示測試" class="input_test" /></div>
<div><input type="text" value="請輸入搜索關(guān)鍵" class="input_test" /></div>
jQuery代碼:
復(fù)制代碼 代碼如下:
<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)了
查看:Demo
相關(guān)文章
jQuery插件HighCharts實(shí)現(xiàn)的2D對數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D對數(shù)餅圖效果,結(jié)合實(shí)例形式分析了jQuery圖形插件HighCharts繪制2D對數(shù)餅圖的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
淺析jQuery Ajax請求參數(shù)和返回?cái)?shù)據(jù)的處理
這篇文章主要介紹了淺析jQuery Ajax請求參數(shù)和返回?cái)?shù)據(jù)的處理的相關(guān)資料,需要的朋友可以參考下2016-02-02
jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-06-06
網(wǎng)上這種插件很多，但是沒一個(gè)合適的，大部分都做得很大，功能齊全。于是自己做了這個(gè)小插件，順便學(xué)習(xí)下jQuery插件的寫法。2010-08-08
jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼
前幾天上QQ的在線視頻網(wǎng)站，看到上面的影片列表頁的圖片有這樣一種效果：當(dāng)向下拉動滾動條時(shí)下面的圖片才開始加載，就是說它不會一下子把所有的圖片都加載出來，拉動滾動條后用戶看到了才會顯示，這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。2010-02-02
下面小編就為大家?guī)硪黄猨Query選擇器之屬性篩選選擇器用法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
用jQuery實(shí)現(xiàn)的模仿a的title屬性的例子，在測試的時(shí)候ie6,7上出現(xiàn)了層次混亂，不過最終解決了,代碼書寫很詳細(xì)，感興趣的朋友可以了解下哦2013-01-01
關(guān)于jQuery中.attr()和.prop()的問題探討
寫了幾句代碼在ie8上能正常運(yùn)行，chrome和ff卻不行，prop()方法適用于Boolean值的屬性，添加屬性名稱該屬性就會生效應(yīng)該使用.prop()者兩點(diǎn)就是他們的區(qū)別吧2013-09-09
這篇文章介紹了解決IE9下JQuery發(fā)送ajax請求失效的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果,涉及jquery針對頁面高度計(jì)算與樣式的動態(tài)添加及刪除技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08