jQuery實現(xiàn)設(shè)置、移除文本框默認值功能
jQuery實現(xiàn)的文本框默認值感應(yīng)鼠標動作:
本章節(jié)介紹一下如何利用jQuery實現(xiàn)文本框默認值感應(yīng)鼠標動作的功能。
比如當文本框獲取鼠標焦點的時候,默認值會被清空,當文本框沒有輸入內(nèi)容,鼠標焦點離開的時候,又會恢復(fù)到默認值。
代碼實例:
<!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="請輸入郵箱地址" id="email"/></p>
</body>
</html>
上面的代碼實現(xiàn)了我們的要求,下面簡單介紹一下它的實現(xiàn)原理:
非常的簡單,就是為文本框注冊focus和blur事件處理函數(shù),當文本框獲取焦點的時候,如果文本框的內(nèi)容和默認值相同,那么就會清空文本框,當焦點離開文本框的時候,如果文本框的內(nèi)容為空,那么就會恢復(fù)到默認值。
或者使用下面的代碼:
$('.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é)習之datagrid 動態(tài)添加、移除editor
- jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實例詳解
- JQuery中DOM實現(xiàn)事件移除的方法
- JQuery實現(xiàn)樣式設(shè)置、追加、移除與切換的方法
- jquery利用命名空間移除綁定事件的方法
- jQuery設(shè)置和移除文本框默認值的方法
- 使用jQuery設(shè)置disabled屬性與移除disabled屬性
- jQuery移除元素自動解綁事件實現(xiàn)思路及代碼
- Jquery 獲取指定標簽的對象及屬性的設(shè)置與移除
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- JQuery 在文檔中查找指定name的元素并移除的實現(xiàn)方法
相關(guān)文章
jQuery插件實現(xiàn)控制網(wǎng)頁元素動態(tài)居中顯示
這篇文章主要介紹了jQuery插件實現(xiàn)控制網(wǎng)頁元素動態(tài)居中顯示,實例分析了jQuery插件的實現(xiàn)與元素動態(tài)顯示的技巧,需要的朋友可以參考下2015-03-03
jquery網(wǎng)頁元素拖拽插件效果及實現(xiàn)
效果說明:配合已有css樣式,載入插件后,網(wǎng)頁元素可以隨意在窗口內(nèi)拖拽,設(shè)置了原位置半透明和拖拽半透明的效果選項,可根據(jù)需要選擇。另外,當頁面上有多個可拖拽元素時,可以載入另外一個用于設(shè)置z-index的插件,模擬windows窗口點擊置頂效果。2013-08-08
基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報關(guān)運單信息
這篇文章主要介紹了基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報關(guān)運單信息的相關(guān)資料,非常不錯,需要的朋友可以參考下2016-08-08
jQuery實現(xiàn)內(nèi)容定時切換效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)內(nèi)容定時切換效果,以完整實例形式較為詳細的分析了jQuery結(jié)合時間函數(shù)針對內(nèi)容的定時切換顯示相關(guān)技巧,需要的朋友可以參考下2016-04-04

