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

Question

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

我首先开始使用

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

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

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

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

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

Answer 1

恐怕onbeforeunload部分很难替代，除了点击链接之外还有其他方式离开页面，而且你无法全部拦截。

但是更改事件的问题可以通过更好的方式处理。

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

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

jQuery(
  function($)
  {

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

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