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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
二级域名转向类
Nov 09 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
用cssText批量修改样式
Aug 29 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
基于Vue中的父子传值问题解决
Jul 27 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中用文本文件做数据库的实现方法
2008/03/27 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python实现126邮箱发送邮件
2020/05/20 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
光荣入党自我鉴定
2014/01/22 职场文书
高中体育教学反思
2014/01/29 职场文书
交通安全教育制度
2014/02/02 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
商业项目策划方案
2014/06/05 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
五年级数学教学反思
2016/02/16 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Python图像处理库PIL详细使用说明
2022/04/06 Python