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 快捷键设置实现代码
Mar 13 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
angular中的post请求处理示例详解
Jun 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 gzip压缩输出的实现方法
2013/04/27 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP导入导出Excel代码
2015/07/07 PHP
php+mysql实现无限级分类
2015/11/11 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
Python with语句和过程抽取思想
2019/12/23 Python
浅析Django中关于session的使用
2019/12/30 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
药学专业毕业生求职信
2013/10/20 职场文书
客服实习的个人自我鉴定
2013/10/20 职场文书
幼儿师范毕业生自荐信
2013/11/09 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
就业意向书范本
2015/05/11 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL