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 相关文章推荐
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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/10/09 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python实现排序算法
2014/02/14 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
高中地理教学反思
2016/02/19 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis