编辑表单后离开本页面时做提示(jQuery版)

关键字: onbeforeunload 表单 提示

添加如下JavaScript：

$.fn.enable_changed_form_confirm = function () {
     var _f = this;
     $('input[@type=text]', this).each(function() {
         $(this).attr('_value', $(this).val());
    });
     $('input[@type=password]', this).each(function() {
         $(this).attr('_value', $(this).val());
    });
     $('textarea', this).each(function() {
         $(this).attr('_value', $(this).val());
    });
     $('input[@type=checkbox]', this).each(function() {
         var _v = '';
         if(this.checked == true) {
             _v = 'on';
         } else {
             _v = 'off';
        }
         $(this).attr('_value', _v);
    });
     $('input[@type=radio]', this).each(function() {
         var _v = '';
         if(this.checked == true) {
             _v = 'on';
         } else {
             _v = 'off';
        }
         $(this).attr('_value', _v);
    });
     $('select', this).each(function() {
         $(this).attr('_value', this.options[this.selectedIndex].value);
    });

     $(this).submit(function() {
         window.onbeforeunload = null;
    });
    window.onbeforeunload = function() {
         if(is_form_changed(_f)) {
             return "You will lose any unsaved content.";
        }
    }
}

function is_form_changed(f) {
     var changed = false;
     $('input[@type=text]', f).each(function() {
         var _v = $(this).attr('_value');
         if(typeof($(this).attr('_value')) == 'undefined') {
             _v = '';
        }
         if(_v != $(this).val()) {
             changed = true;
        }
    });
     $('input[@type=password]', f).each(function() {
         var _v = $(this).attr('_value');
         if(typeof($(this).attr('_value')) == 'undefined') {
             _v = '';
        }
         if(_v != $(this).val()) {
             changed = true;
        }
    });
     $('textarea', f).each(function() {
         var _v = $(this).attr('_value');
         if(typeof($(this).attr('_value')) == 'undefined') {
             _v = '';
        }
         if(_v != $(this).val()) {
             changed = true;
        }
    });
     $('input[@type=checkbox]', f).each(function() {
         var _v = '';
         if(this.checked == true) {
             _v = 'on';
         } else {
             _v = 'off';
        }
         if($(this).attr('_value') != _v) {
             changed = true;
        }
    });
     $('input[@type=radio]', f).each(function() {
         var _v = '';
         if(this.checked == true) {
             _v = 'on';
         } else {
             _v = 'off';
        }
         if($(this).attr('_value') != _v) {
             changed = true;
        }
    });
     $('select', f).each(function() {
         var _v = $(this).attr('_value');
         if(typeof($(this).attr('_value')) == 'undefined') {
             _v = '';
        }
         if(_v != this.options[this.selectedIndex].value) {
             changed = true;
        }
    });
     return changed;
}

$.fn.enable_changed_form_confirm = function () {
	var _f = this;
	$('input[@type=text]', this).each(function() {
		$(this).attr('_value', $(this).val());
	});
	$('input[@type=password]', this).each(function() {
		$(this).attr('_value', $(this).val());
	});
	$('textarea', this).each(function() {
		$(this).attr('_value', $(this).val());
	});
	$('input[@type=checkbox]', this).each(function() {
		var _v = '';
		if(this.checked == true) {
			_v = 'on';
		} else {
			_v = 'off';
		}
		$(this).attr('_value', _v);
	});
	$('input[@type=radio]', this).each(function() {
		var _v = '';
		if(this.checked == true) {
			_v = 'on';
		} else {
			_v = 'off';
		}
		$(this).attr('_value', _v);
	});
	$('select', this).each(function() {
		$(this).attr('_value', this.options[this.selectedIndex].value);
	});
	
	$(this).submit(function() {
		window.onbeforeunload = null;
	});
	window.onbeforeunload = function() {
	  	if(is_form_changed(_f)) {
			return "You will lose any unsaved content.";
		}
	}
}

function is_form_changed(f) {
	var changed = false;
	$('input[@type=text]', f).each(function() {
		var _v = $(this).attr('_value');
		if(typeof($(this).attr('_value')) == 'undefined') {
			_v = '';
		}
		if(_v != $(this).val()) {
			changed = true;
		}
	});
	$('input[@type=password]', f).each(function() {
		var _v = $(this).attr('_value');
		if(typeof($(this).attr('_value')) == 'undefined') {
			_v = '';
		}
		if(_v != $(this).val()) {
			changed = true;
		}
	});
	$('textarea', f).each(function() {
		var _v = $(this).attr('_value');
		if(typeof($(this).attr('_value')) == 'undefined') {
			_v = '';
		}
		if(_v != $(this).val()) {
			changed = true;
		}
	});
	$('input[@type=checkbox]', f).each(function() {
		var _v = '';
		if(this.checked == true) {
			_v = 'on';
		} else {
			_v = 'off';
		}
		if($(this).attr('_value') != _v) {
			changed = true;
		}
	});
	$('input[@type=radio]', f).each(function() {
		var _v = '';
		if(this.checked == true) {
			_v = 'on';
		} else {
			_v = 'off';
		}
		if($(this).attr('_value') != _v) {
			changed = true;
		}
	});
	$('select', f).each(function() {
		var _v = $(this).attr('_value');
		if(typeof($(this).attr('_value')) == 'undefined') {
			_v = '';
		}
		if(_v != this.options[this.selectedIndex].value) {
			changed = true;
		}
	});
	return changed;
}

上面的代码将表单的原始值以一个名为"_value"的attr保持在input和select标签上
window.onbeforeunload时判断form是否更改过并给出提示。

需要在具体某个页面里添加如下代码来绑定表单原始值:

$().ready(function() {
     $('form').enable_changed_form_confirm();
});