仅在字段值更改时激活 OnBeforeUnload [英] Activating OnBeforeUnload ONLY when field values have changed

问题描述

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

What I'm trying to achieve is to Warn the user of unsaved changes if he/she tries to close a page or navigate away from it without saving first.

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

I've managed to get the OnBeforeUnload() dialog to pop-up... but I don't want it to be displayed at all if the user hasn't modified any field values. For this, I'm using this hidden input field called is_modified that starts with a default value of false and flips to true when any field is edited.

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

I tried to bind the change event to this is_modified field to try and detect for value change... and only then activate OnBeforeUnload.

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

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

But from what I figure is that the change() event works only after these 3 steps - a field receives focus, a value is changed and the field looses focus. In case of the hidden input field, I'm not sure how this receiving and loosing focus part works! Hence, the onbeforeunload function is never being activated.

谁能建议一种方法来维持 is_modified 的触发器?

Can anyone suggest a way to maintain a trigger over is_modified?

谢谢.

推荐答案

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

I had a similar requirement so came up with following jQuery script:

$(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.

The above code checks the needToConfirm variable, if its true then it will display warning message. Whenever input, select or textarea elements value is changed, needToConfirm variable is set to true.

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

PS: Firefox > 4 don't allow custom message for onbeforeunload.
Reference: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

更新:如果你是一个性能狂，你会喜欢@KyleMit 的 建议.他编写了一个 jQuery 扩展 only()，它对任何元素都只执行一次.

UPDATE: If you are a performance freak, you will love @KyleMit's suggestion. He wrote a jQuery extension only() which will be executed only once for any element.

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

这篇关于仅在字段值更改时激活 OnBeforeUnload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！