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 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
javascript搜索框效果实现方法
May 14 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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 Socket写的POP3类
2013/10/30 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
详解Python3注释知识点
2019/02/19 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
学校司机岗位职责
2013/11/14 职场文书
英文导游欢迎词
2014/01/11 职场文书
感恩教育活动总结
2014/05/05 职场文书
班组拓展活动方案
2014/08/14 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书