Dean's blog

在用户填写表单的时候，如果表单的内容有变化，在用户还未保存前，取消编辑或跳转到其它网页，可以跟据表单内容是否有变化，提醒用户，避免工作内容的丢失。这里提供了一个简单的插件，用来实现这个功能。功能如下：

mirthsoft.watchor.js：

(function ($) {
    $.fn.watchor = function (options) {
        var that = this;

        //重置状态
        var reset = function(elm){
            $(elm).data("__OriginalVal", $(elm).val());
            if($(elm).is(":radio,:checkbox")){
                $(elm).data("__OriginalChecked", $(elm).prop("checked"));
            }
        }

        //检查是否有变更
        var isChanged = function(elm){
            elm = $(elm);
            var changed = false;
            if(elm.is("input,select,textarea,:radio,:checkbox")){
                changed = elm.data("__OriginalVal") != elm.val();

                if(!changed && elm.is(":radio,:checkbox")) {
                    changed = elm.data("__OriginalChecked") != elm.prop("checked");
                }
                return changed;
            } else {
                elm.find("input,select,textarea,:radio,:checkbox").each(function(){ 
                    if(!changed) changed = isChanged($(this));
                });
            }
            return changed;
        }
        
        //初始化
        if(options == undefined){
            this.find("input,select,textarea").each(function(){  reset($(this)); });
        }

        if(options == "reset"){
            this.each(function(){reset($(this));});
        }

        if(options == "isChanged"){
            return isChanged(this);
        }
    }
})(jQuery);

比如，如下的表单：

<form class="demo">
	<div>姓名：<input type="text" name="name" /></div>
	<div>年龄：<input type="text" name="age" /></div>
	<div>性别：<input type="radio" name="sex" value="0" />女 <input type="radio" name="sex" value="0" />男</div>
</form>
<input type="button" value="提交" class="submit" />
<input type="button" value="取消" class="cancel" />

我们可以在用户点击“取消”的时候，检查表单是否有修改，如果有，则提醒用户，如下：

//初始化
$(".demo").watchor();

$(".cancel").click(function(){
	//检查表单是否有修改
	if($(".demo").watchor("isChanged")){
		alert("表单已被修改，取消将不被保存");
	}
});

如果表单内容有Ajax异步加载的，可以在加载完成后，再使用$(".demo").watchor();来初始化。

从这里下载完整Demo：

检查表单是否有修改.zip (33.79 kb)