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语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
JS前端加密算法示例
2016/12/22 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
详解Python中的join()函数的用法
2015/04/07 Python
python实现解数独程序代码
2017/04/12 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
详解python metaclass(元类)
2020/08/13 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
就业推荐自我鉴定
2013/10/06 职场文书
班组长工作职责
2013/12/25 职场文书
村级换届选举方案
2014/05/10 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js