javascript - 仅当字段值发生更改时激活 OnBeforeUnload

Question

我想要实现的是，如果用户尝试关闭页面或在不先保存的情况下导航离开页面，则警告用户未保存的更改。

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

我尝试将 change 事件绑定(bind)到此 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=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;
});