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