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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
js实现两点之间画线的方法
May 12 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php学习之function的用法
2012/07/14 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
Python单链表简单实现代码
2016/04/27 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python实现简单银行管理系统
2019/10/25 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
美国翻新电子产品商店:The Store
2019/10/08 全球购物
高中数学教师求职信
2013/10/30 职场文书
副总经理任命书
2014/06/05 职场文书
文化产业实施方案
2014/06/07 职场文书
安全例会汇报材料
2014/08/23 职场文书
大一新生期末自我评价
2014/09/12 职场文书
小学音乐课教学反思
2016/02/18 职场文书
HTML常用标签超详细整理
2022/03/19 HTML / CSS
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技