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的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
vue - props 声明数组和对象操作
Jul 30 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 HTML代码串截取代码
2008/12/29 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Python内置模块turtle绘图详解
2017/12/09 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
python数组循环处理方法
2019/08/26 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
英文版网络工程师求职信
2013/10/28 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
党支部工作总结2015
2015/04/01 职场文书
建国大业观后感600字
2015/06/01 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS