編輯表單後離開本頁面時做提示(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(); });