jQuery實(shí)現(xiàn)設(shè)置、移除文本框默認(rèn)值功能
jQuery實(shí)現(xiàn)的文本框默認(rèn)值感應(yīng)鼠標(biāo)動(dòng)作:
本章節(jié)介紹一下如何利用jQuery實(shí)現(xiàn)文本框默認(rèn)值感應(yīng)鼠標(biāo)動(dòng)作的功能。
比如當(dāng)文本框獲取鼠標(biāo)焦點(diǎn)的時(shí)候,默認(rèn)值會(huì)被清空,當(dāng)文本框沒(méi)有輸入內(nèi)容,鼠標(biāo)焦點(diǎn)離開(kāi)的時(shí)候,又會(huì)恢復(fù)到默認(rèn)值。
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>腳本之家</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").focus(function(){
var email_txt = $(this).val();
if(email_txt == this.defaultValue){
$(this).val("");
}
})
$("#email").blur(function(){
var email_txt = $(this).val();
if (email_txt == "") {
$(this).val(this.defaultValue);
}
})
})
</script>
</head>
<body>
<p><input type="text" value="請(qǐng)輸入郵箱地址" id="email"/></p>
</body>
</html>
上面的代碼實(shí)現(xiàn)了我們的要求,下面簡(jiǎn)單介紹一下它的實(shí)現(xiàn)原理:
非常的簡(jiǎn)單,就是為文本框注冊(cè)focus和blur事件處理函數(shù),當(dāng)文本框獲取焦點(diǎn)的時(shí)候,如果文本框的內(nèi)容和默認(rèn)值相同,那么就會(huì)清空文本框,當(dāng)焦點(diǎn)離開(kāi)文本框的時(shí)候,如果文本框的內(nèi)容為空,那么就會(huì)恢復(fù)到默認(rèn)值。
或者使用下面的代碼:
$('.default-value').each(function() {
var default_value = this.value;
$(this).focus(function(){
if(this.value == default_value) {
this.value = '';
}
});
$(this).blur(function(){
if(this.value == '') {
this.value = default_value;
}
});
});
- jQuery Easyui學(xué)習(xí)之datagrid 動(dòng)態(tài)添加、移除editor
- jQuery綁定事件監(jiān)聽(tīng)bind和移除事件監(jiān)聽(tīng)unbind用法實(shí)例詳解
- JQuery中DOM實(shí)現(xiàn)事件移除的方法
- JQuery實(shí)現(xiàn)樣式設(shè)置、追加、移除與切換的方法
- jquery利用命名空間移除綁定事件的方法
- jQuery設(shè)置和移除文本框默認(rèn)值的方法
- 使用jQuery設(shè)置disabled屬性與移除disabled屬性
- jQuery移除元素自動(dòng)解綁事件實(shí)現(xiàn)思路及代碼
- Jquery 獲取指定標(biāo)簽的對(duì)象及屬性的設(shè)置與移除
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- JQuery 在文檔中查找指定name的元素并移除的實(shí)現(xiàn)方法
相關(guān)文章
jQuery插件實(shí)現(xiàn)控制網(wǎng)頁(yè)元素動(dòng)態(tài)居中顯示
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)控制網(wǎng)頁(yè)元素動(dòng)態(tài)居中顯示,實(shí)例分析了jQuery插件的實(shí)現(xiàn)與元素動(dòng)態(tài)顯示的技巧,需要的朋友可以參考下2015-03-03jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效
本文給大家分享的是一段使用jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效的代碼,效果非常不錯(cuò),分享給大家,希望大家能夠喜歡2015-02-02jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
這篇文章主要介紹了jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止的方法,需要的朋友可以參考下2014-04-04jquery網(wǎng)頁(yè)元素拖拽插件效果及實(shí)現(xiàn)
效果說(shuō)明:配合已有css樣式,載入插件后,網(wǎng)頁(yè)元素可以隨意在窗口內(nèi)拖拽,設(shè)置了原位置半透明和拖拽半透明的效果選項(xiàng),可根據(jù)需要選擇。另外,當(dāng)頁(yè)面上有多個(gè)可拖拽元素時(shí),可以載入另外一個(gè)用于設(shè)置z-index的插件,模擬windows窗口點(diǎn)擊置頂效果。2013-08-08toggle一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框
本文為大家介紹下如何讓一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框,具體實(shí)現(xiàn)如下,感興趣的朋友可參考下,希望對(duì)大家有所幫助2013-09-09基于MVC+EasyUI的web開(kāi)發(fā)框架之使用云打印控件C-Lodop打印頁(yè)面或套打報(bào)關(guān)運(yùn)單信息
這篇文章主要介紹了基于MVC+EasyUI的web開(kāi)發(fā)框架之使用云打印控件C-Lodop打印頁(yè)面或套打報(bào)關(guān)運(yùn)單信息的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下2016-08-08jQuery實(shí)現(xiàn)內(nèi)容定時(shí)切換效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)內(nèi)容定時(shí)切換效果,以完整實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合時(shí)間函數(shù)針對(duì)內(nèi)容的定時(shí)切換顯示相關(guān)技巧,需要的朋友可以參考下2016-04-04