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 相关文章推荐
js 多浏览器分别判断代码
Apr 01 Javascript
jQuery参数列表集合
Apr 06 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
React组件生命周期详解
Jul 03 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
JS实现数组去重的11种方法总结
Apr 04 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python实时获取cmd的输出
2015/12/13 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python调用c++传递数组的实例
2019/02/13 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
《愚公移山》教学反思
2014/02/20 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
详解Redis复制原理
2021/06/04 Redis
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript