Javascript 仅当字段值已更改时激活OnBeforeUnload

我试图实现的是，如果用户试图关闭某个页面或在没有先保存的情况下离开该页面，则警告用户未保存的更改

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

我尝试将更改事件绑定到此is_modified字段，以尝试检测值更改。。。只有在卸载之前激活OnForeUnload

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

但从我的数字来看，更改事件只有在这三个步骤之后才起作用——字段接收焦点，值更改，字段失去焦点。在隐藏输入字段的情况下，我不确定这个接收和释放焦点部分是如何工作的！因此，onbeforeunload功能永远不会被激活

有人能提出一种方法来保持触发器在被修改后的状态吗

---

谢谢。

以不同的方式尝试您的逻辑。也就是说，将用于检查输入字段值的逻辑放在onbeforeunload方法中

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

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

---

在IE9中，您可以使用简单的返回语句re，它不会显示任何对话框。愉快的编码..

我也有类似的要求，因此提出了以下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元素值，NeedToConfig变量都设置为true

PS:Firefox>4不允许onbeforeunload的自定义消息。 参考：

更新：如果你是一个表演狂，你会喜欢这个建议的。 他只编写了一个jQuery扩展，对任何元素只执行一次

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

---

以下内容在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.";        
  }
}   

如果用户提交表单以保存更改，您可能希望将此change Main表单添加到他们提交的表单的ID中：

$("#mainForm").submit(function() {
  needToConfirm = false;
});

---

以上对我有效。

true不是正确的值。在某些浏览器（至少是Firefox）中，返回null可能会取消该对话框。然而，在IE中，我找不到从处理程序中取消对话框的方法。对我来说唯一有效的方法就是事先完全移除处理程序，如Bryan Larsen的回答，window.beforeunload=null。这很公平。遗憾的是，我没有在回答之前彻底测试我的解决方案我知道我参加聚会有点晚了，但我只是碰巧遇到了这个。但是，在IE中，如果函数返回未定义的或不返回任何内容，则对话框不会显示这在FF中也有效。我尝试返回true/false/null，IE只是将true/false/null作为对话框中的文本。不知道为什么。希望这对其他人有所帮助。我确认@JonathanKuhn对Safari 8.0.7的评论显然在IE中设置onbeforeunload=null失败：这似乎是一个仅限IE7的错误-它在IE8中工作正常，幸运的是，这是我所需要支持的全部！它就像一个符咒。但有一个小问题：我无法改变信息。我想写我自己的信息，比如：你疯了吗？你想离开吗？但我无法让它工作…谢谢你的回答，但我发现问题是另一个。我使用的是firefox，有一个功能不允许更改此消息。我在chrome上试用过，效果不错，但在firefox上不起作用…@marianobianchi Yes after firefox 4自定义消息不允许用于onbeforeunload。将根据组建议更新我的答案：您可以通过使用jQuery简化更改选择器。此外，在第一个事件设置needToConfirm为true之后，您不需要继续侦听和触发更改事件。变化只是“变化”的简写。您可以使用，而不是启用，这样事件就不需要继续触发后续更改。在我们进行此操作时，如果您愿意添加扩展方法，我编写了一个名为的5行扩展方法，它在任何元素上调用后只会触发一次。然而，对于每个事件类型，每个元素最多执行一次。这是一个多一点的代码，但它很方便，更干净，处理工作量更少。如果您有一个包含许多不同字段的表单，它将持续激发，这可能会很有帮助。

$("#mainForm").submit(function() {
  needToConfirm = false;
});

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