22

我想要实现的是警告用户未保存的更改，如果他/她试图关闭页面或导航离开它而不先保存。

我设法让OnBeforeUnload()对话框弹出......但如果用户没有修改任何字段值，我根本不希望它显示。为此，我使用了这个名为is_modified的隐藏输入字段，它以默认值false开头，并在编辑任何字段时翻转为true 。

我尝试将更改事件绑定到此 is_modified 字段以尝试检测值更改...然后才激活 OnBeforeUnload。

$( '#is_modified' ).change( function() {
    if( $( '#is_modified' ).val() == 'true' )
        window.onbeforeunload = function() { return "You have unsaved changes."; }
});

但据我所知，该change()事件仅在这 3 个步骤之后才起作用 - 一个字段获得焦点，一个值被更改并且该字段失去焦点。在隐藏输入字段的情况下，我不确定这个接收和失去焦点部分是如何工作的！因此，onbeforeunload 功能永远不会被激活。

谁能建议一种方法来维护 is_modified 的触发器？

谢谢。

4

7 回答 7

31

我有类似的要求，所以想出了以下 jQuery 脚本：

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}

$("select,input,textarea").change(function() {
    needToConfirm = true;
});

上面的代码检查needToConfirm变量，如果是，true那么它将显示警告消息。每当input或元素值发生变化时，select变量就会设置为。 textareaneedToConfirmtrue

PS： Firefox > 4 不允许为onbeforeunload.
参考：https ://bugzilla.mozilla.org/show_bug.cgi?id=588292

更新：如果你是一个表演狂，你会喜欢@KyleMit 的建议。他编写了一个 jQuery 扩展only()，对任何元素只执行一次。

$.fn.only = function (events, callback) {
    //The handler is executed at most once for all elements for all event types.
    var $this = $(this).on(events, myCallback);
    function myCallback(e) {
        $this.off(events, myCallback);
        callback.call(this, e);
    }
    return this
};    

$(":input").only('change', function() {
    needToConfirm = true;
});
于 2011-07-05T07:51:23.053 回答
7

我们只是Window.onbeforeunload用作我们的“更改”标志。这是我们正在做的事情，（使用lowpro）：

Event.addBehavior({
  "input[type=radio]:change,input[type=text]:change,input[type=checkbox]:change,select:change": function(ev) {
       window.onbeforeunload = confirmLeave;
  }
  ".button.submit-button:click": function(ev) {
       window.onbeforeunload = null;
  },
});


function confirmLeave(){
    return "Changes to this form have not been saved. If you leave, your changes will be lost."  
}
于 2009-06-18T14:40:16.180 回答
6

以下在 jQuery 中运行良好：

var needToConfirm = false;

$("input,textarea").on("input", function() {
  needToConfirm = true;
});

$("select").change(function() {
  needToConfirm = true;
});

window.onbeforeunload = function(){        
  if(needToConfirm) {
    return "If you exit this page, your unsaved changes will be lost.";        
  }
}

如果用户正在提交表单以保存更改，您可能需要添加此内容（更改#mainForm为他们提交的表单的 ID）：

$("#mainForm").submit(function() {
  needToConfirm = false;
});
于 2013-05-25T14:19:31.027 回答
3 
$(window).bind('beforeunload',function() {
 return "'Are you sure you want to leave the page. All data will be lost!";
});

$('#a_exit').live('click',function() {
    $(window).unbind('beforeunload');
});

以上对我有用。

于 2014-05-10T07:18:14.153 回答
1

以不同的方式尝试你的逻辑。意思是，将检查输入字段值的逻辑放入您的onbeforeunload方法中。

window.onbeforeunload = function () { 
    if ($("#is_modified").val() == 'true') { 
        return "You have unsaved changes."; 
    } else { 
        return true; // I think true is the proper value here 
    } 
};
于 2009-05-29T09:19:21.907 回答
0

为什么不onbeforeunload调用一个函数来检查值是否已更改，如果是，则返回“未保存的更改”确认？

于 2009-05-29T09:19:35.900 回答
0

在 IE9 中，您可以使用不会显示任何对话框的简单返回语句 (re)。快乐的编码..

于 2011-06-06T08:05:06.653 回答