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 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js 内存释放问题
2010/04/25 Javascript
js变换显示图片的实例
2013/04/16 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python实现决策树分类
2018/08/30 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python调用c++传递数组的实例
2019/02/13 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
会计专业求职信
2014/08/10 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
2015年教师国培感言
2015/08/01 职场文书
话题作文之自信作文
2019/11/15 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python