仅在字段值更改时激活OnBeforeUnload

Question

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

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

我尝试将change事件绑定到此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> 4不允许自定义消息onbeforeunload.
参考:https://bugzilla.mozilla.org/show_bug.cgi？id = 589292

更新:如果你是一个表演怪胎,你会喜欢@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;
});

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

以不同的方式尝试你的逻辑。意思是，将检查输入字段值的逻辑放入您的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 
    } 
};