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

问题描述

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

我设法得到了 OnBeforeUnload（）对话框弹出...但我不如果用户没有修改任何字段值，则不希望它显示。为此，我使用这个隐藏的输入字段 is_modified ，默认值为 false 开始，并且当任何字段为编辑。

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

  $（'#is_modified'）.change（function（）{
 if（$（'#is_modified' .val（）=='true'）
 window.onbeforeunload = function（）{return你有未保存的更改。;} 
}）; 
  

但是从我所看到的是， change（）事件仅在这3个步骤之后才起作用 - 一个字段接收到焦点，一个值被改变，该字段失去了焦点。如果隐藏的输入字段，我不知道这个接收和失去的焦点部分如何工作！因此，onbeforeunload函数永远不会被激活。

任何人都可以建议一种方式来保持触发is_modified？

解决方案

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

  $（document）.ready（function（）{
 needToConfirm = false; 
 window.onbeforeunload = askConfirm; 
} ）; 
 
函数askConfirm（）{
 if（needToConfirm）{
 //将你的自定义消息放在这里
 return你的未保存的数据将丢失。 
} 
} 
 
 $（select，input，textarea）change（function（）{
 needToConfirm = true; 
}）; 
  

上述代码检查 needToConfirm 变量，如果它的 true 则会显示警告消息。
每当输入，选择或 textarea 元素值更改， needToConfirm 变量设置为 true 。

---

PS： Firefox> 4不允许自定义消息 onbeforeunload 。

参考： https： //bugzilla.mozilla.org/show_bug.cgi?id=588292

---

更新： 如果你是一个表演怪胎，你会喜欢 @ KyleMit的建议。
他写了一个jQuery扩展名（code> only（），这些扩展只对任何元素执行一次。

  $。fn.only = function（events，callback）{
 //处理程序最多执行一次适用于所有事件类型的所有元素。 
 var $ this = $（this）.on（events，myCallback）; 
函数myCallback（e）{
 $ this.off（events，myCallback）; 
 callback.call（this，e）; 
} 
 return this 
}; 
 
 $（：input）。only（'change'，function（）{
 needToConfirm = true; 
}）; 
  

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.

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.

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

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.

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

Thanks.

解决方案

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

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 don't allow custom message for onbeforeunload.
Reference: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

---

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屋！