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

编辑表单后离开本页面时做提示(jQuery版) 关键字: onbeforeunload 表单 提示 添加如下JavaScript： Java代码 $.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; } Java代码 $.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是否更改过并给出提示。 需要在具体某个页面里添加如下代码来绑定表单原始值: Java代码 $().ready(function() { $('form').enable_changed_form_confirm(); });