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 sort排序使用方法
Oct 17 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
神经网络python源码分享
2017/12/15 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
pycharm安装及如何导入numpy
2020/04/03 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
Python实现位图分割的效果
2021/11/20 Python