jquery监控数据是否变化(修正版)


Posted in Javascript onApril 12, 2011
///<reference path="query-1.5.1.min.js" /> 
(function($) { 
/*监控页面数据是否发生变化*/ 
var pageDataChange = false; 
var tagName = "Input, Select, Textarea"; 
var ctrlIds = []; 
$.fn.MonitorDataChange = function(options) { 
var deafult = { 
arrTags: tagName, //需监控控件的tagName属性 
arrCtrls: ctrlIds //不监控的控件ID 
}; 
var ops = $.extend(deafult, options); 
tagName = ops.arrTags; 
ctrlIds = ops.arrCtrls; 
/*元素第一次获取焦点时缓存该元素数据*/ 
$(ops.arrTags).one("focus", function() { 
if ($.inArray($(this).attr("id"), ops.arrCtrls) != -1) { 
return; 
} 
$(this).data('initData', $(this).val()); 
}); 
}; 
/*获取页面数据是否已经改变*/ 
$.fn.isChange = function() { 
$(tagName).each(function() { 
if ($.inArray($(this).attr("id"), ctrlIds) != -1) { 
return; 
} 
/*如果该元素的initData缓存数据已定义并且不等于他的value值,标识该页面中数据发生变化*/ 
if (typeof ($(this).data('initData')) != 'undefined') { 
if ($(this).data('initData') != $(this).val()) { 
pageDataChange = true; 
} 
} 
}); 
return pageDataChange; 
}; 
})(jQuery);

前台调用:
<script type="text/javascript"> 
var is_change = false; 
$(document).ready(function() { 
$("form").MonitorDataChange(); 
}); 
function alertMsg() { 
is_change = $.fn.isChange(); 
if(is_change){ 
alert('数据发生改变!'); 
} 
} 
</script> 
<input type="text"/> 
<input type="text" /> 
<input type="text" /> 
<input type="text" /> 
<asp:TextBox runat="server"></asp:TextBox> 
<asp:CheckBox runat="server" /> 
<input type="button" value="true" onclick="alertMsg();"/>
Javascript 相关文章推荐
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 #Javascript
javascript 学习笔记(八)javascript对象
Apr 12 #Javascript
jQuery的初始化与对象构建之浅析
Apr 12 #Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 #Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 #Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 #Javascript
window.dialogArguments 使用说明
Apr 11 #Javascript
You might like
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP crc32()函数讲解
2019/02/14 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python中类的继承代码实例
2014/10/28 Python
python中as用法实例分析
2015/04/30 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Pandas中resample方法详解
2019/07/02 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
sort命令的作用和用法
2012/11/04 面试题
婚前协议书
2014/04/15 职场文书
法人授权委托书样本
2014/09/19 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android