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 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 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
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python+logging+yaml实现日志分割
2019/07/22 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python实现四人制扑克牌游戏
2020/04/22 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
数学系个人求职信范文
2014/01/30 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL