Question

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

我设法让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的触发器吗？

感谢。

Answer 1

我有类似的要求所以提出了以下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或textarea元素值更改时，needToConfirm变量都会设置为true。

PS： Firefox＆gt; 4不允许onbeforeunload的自定义消息参考：https://bugzilla.mozilla.org/show_bug.cgi?id=588292

更新：如果你是一个表演怪胎，你会喜欢@KyleMit's的建议。他写了一个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;
});

Answer 2

我们只使用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."  
}

Answer 3

以下在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;
});

Answer 4

$(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');
});

以上作品对我来说。

Answer 5

以不同的方式尝试您的逻辑。意思是，在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 
    } 
};

Answer 6

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

Answer 7

在IE9中你可以使用简单的return语句（re），它不会显示任何对话框。快乐的编码..

仅在字段值更改时激活OnBeforeUnload

7 个答案: