Jquery 离开页面时提示保存

最新推荐文章于 2022-06-20 15:43:40 发布

原创最新推荐文章于 2022-06-20 15:43:40 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #F# #ViewUI

JQuery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个jQuery插件，该插件用于检测表单字段的变化，并在用户尝试离开页面前提示确认信息以防止未保存的数据丢失。此功能通过记录每个输入元素的初始值并在用户导航离开时检查当前值来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.fn.enable_changed_form_confirm = function () {    
    var _f = this;  
 $(':text, :password, textarea', this).each(function() {    
        $(this).attr('_value', $(this).val());    
    });  
  
    $(':checkbox, :radio', this).each(function() {    
        var _v = this.checked ? 'on' : '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;    
    $(':text, :password, textarea', f).each(function() {    
        var _v = $(this).attr('_value');    
        if(typeof(_v) == 'undefined')   _v = '';    
        if(_v != $(this).val()) changed = true;    
    });    
  
    $(':checkbox, :radio', f).each(function() {    
        var _v = this.checked ? 'on' : 'off';  
        if(_v != $(this).attr('_value')) changed = true;    
    });    
   
    $('select', f).each(function() {    
        var _v = $(this).attr('_value');    
        if(typeof(_v) == 'undefined')   _v = '';    
        if(_v != this.options[this.selectedIndex].value) changed = true;  
    });    
    return changed;    
}  
  
  
  
  
$(function() {    
    $('form').enable_changed_form_confirm();    
});