jquery监控数据是否变化(修正版)

 更新时间:2011年04月12日 13:56:05   作者:  
jquery监控数据是否变化(修正版) 之前写的那篇中存在许多bug,今天重新整理了一下。还请各位指教
复制代码 代码如下:

///<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();"/>

相关文章

  • jquery实现邮箱自动填充提示功能

    jquery实现邮箱自动填充提示功能

    这篇文章主要介绍了jquery实现邮箱自动填充提示功能,为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,对如何实现自动提示功能感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery的deferred对象详解

    jQuery的deferred对象详解

    开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。
    2014-11-11
  • jQuery 追加元素的方法如append、prepend、before

    jQuery 追加元素的方法如append、prepend、before

    jQuery - 追加元素的方法有很多如append、prepend、before等等,下面为大家详细介绍下
    2014-01-01
  • jquery实现员工信息添加与删除功能

    jquery实现员工信息添加与删除功能

    这篇文章主要为大家详细介绍了利用jquery制作简易的员工信息添加与删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js调用iframe实现打印页面内容的方法

    js调用iframe实现打印页面内容的方法

    这篇文章主要介绍了js调用iframe实现打印页面内容的方法,需要的朋友可以参考下
    2014-03-03
  • jQuery设置单选按钮radio选中/不可用的实例代码

    jQuery设置单选按钮radio选中/不可用的实例代码

    这篇文章主要介绍了jQuery设置单选按钮radio选中/不可用的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery中odd选择器的定义和用法

    jQuery中odd选择器的定义和用法

    这篇文章主要介绍了jQuery中odd选择器的定义和用法,较为详细的分析了odd选择器的具体功能、定义与使用方法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery基于ajax实现页面加载后检查用户登录状态的方法

    jQuery基于ajax实现页面加载后检查用户登录状态的方法

    这篇文章主要介绍了jQuery基于ajax实现页面加载后检查用户登录状态的方法,结合实例形式较为详细分析了jQuery结合ajax进行表单登陆验证操作的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • 写JQuery插件的基本知识

    写JQuery插件的基本知识

    这篇文章主要介绍了从如何写JQuery插件,需要注意的事项,还有必须要做的步骤,看过这个文章相信你会明白如何写好一个JQuery插件
    2013-11-11
  • jQuery自动切换/点击切换选项卡效果的小例子

    jQuery自动切换/点击切换选项卡效果的小例子

    我们看到很多网站会有有错误404页面,当页面不存存时就会提示,然后过几秒就会自动跳到首页了,下面我来给大家举一个404错误页面跳到首页实例,有需要的朋友可以参考一下
    2013-08-08

最新评论