Question

这里很常见的情况是，用户更改表单中的字段并离开页面而不保存。我发出警告信息。

我首先开始使用

$(window).bind("beforeunload", function(){ });

但我想抛出一个Dialog并给用户一些选项，我选择了这个。

$("#myForm").change( function(){
    $("a:not(:#myForm a)").click( function(){
    $("#promptDialog").dialog("open");
        return false;
    });
});

唯一不能正常工作的情况是用户更改字段，然后将其更改回原始值（它不应该提示，但确实如此）。

这个解决方案是否优雅，有更好的方法吗？

Answer 1

我担心onbeforeunload-part很难替换，还有其他方法可以离开页面而不是点击链接，你不能拦截所有这些。

但改变事件的问题可以更好地处理。

在DOMready上存储表单的初始值，例如在表格的数据中。

在onunload之前，您可以比较存储的值和当前值以确定是否有任何更改：

jQuery(
  function($)
  {

    $('#myForm').data('defaultValues',$('#myForm').serialize());

    $(window)
      .on('beforeunload',
          function()
          {
            if($('#myForm').data('defaultValues')!=$('#myForm').serialize())
            {
              return 'are you sure?';
            }
          });
  }
);

Answer 2

您无法覆盖浏览器的实现功能。您希望为自定义对话框交换标准警报（实现定义的构造），而在onbeforeunload函数中无法做到这一点。您的后一种解决方案应该足以替代。

在表单字段发生更改且未保存时提示用户

2 个答案: