javascript - 当表单字段发生更改并且他们不保存时提示用户

Question

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

我首先开始使用

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

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

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

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

这个解决方案优雅吗，有没有更好的方法来做到这一点？

Answer 1

恐怕onbeforeunload-part很难替换，除了点击链接，还有其他的方式离开页面，不能全部拦截。

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

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

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

jQuery(
  function($)
  {

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

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

Answer 2

您不能覆盖浏览器的实现功能。您想为您的自定义对话框交换标准警报（实现定义的构造），而您无法在onbeforeunload函数中执行此操作。您的后一种解决方案应该足以替代。