javascript - 如何检查页面中的某些内容是否已更改？

Question

如果我在页面中进行任何更改，然后尝试在不保存的情况下导航离开，我想要一条错误消息询问我们是否要保存更改。

Answer 1

onbeforeunload事件是你需要的。将一个函数绑定到它，该函数返回一个string要显示的函数（仅适用于 Chrome，其他浏览器将显示默认消息），每当用户尝试从页面导航离开（按后退、前进、单击链接、关闭选项卡或窗口本身）时.

向用户显示类似确认的对话框，如果用户选择继续，则执行他请求的操作。如果他选择留在页面上，则不会发生任何事情。

$('input').change(function(){
    window.onbeforeunload = function(){
         //Return the message that should be displayed in Chrome.
         // Other browsers will show default message.
         return "You have unsaved changes on this page";
     };
});

保存更改时，只需设置window.onbeforeunload = null为在用户尝试离开页面时删除消息。

Answer 2

有几件事需要考虑。

您使用哪些元素进行输入。这将影响您的 elementSelector（在下面的代码中使用）如果您使用诸如 jeditable 之类的插件，您必须了解的不仅仅是用于输入的元素。您还需要知道用于显示值的元素。

如果您绑定更改，如 sudhirs 的回答，我建议您使用 live 而不是绑定方式来自动支持就地编辑。

在更改事件上设置标志的标志解决方案不包括用户将值更改回原始值的情况。

下面代码的想法是迭代所有你想要监控的元素并存储原始值。在卸载之前，然后比较这些值，如果发现更改，则应给出警告。

$(function(){
   function getVal(){
      var val,node = $(this),nodeType = node.attr('type');
       if(this.nodeName.toLowerCase() == input){
           if(nodeType === "checkbox" || nodeType === "radio"){
               val = node.attr('checked');
           } else{
               val = node.val();
           }
       } else{
          val = node.text();
       }
       return val;
   }
   $(elementSelector).each(function)({
       $(this).data('original',getVal.Call(this));
   });
   window.onbeforeunload = function(){
      var hasChanges;
      $(elementSelector).each(function(){
            var org = $(this).data('original'),val = getVal.call(this);
            hasChanges = hasChanges || (org !== val)
      });
      if(hasChanges){
          return "Are you sure you wish to leave this page. Changes will be lost");
      }
   };
});

如果用户在保存后留在页面上（即数据使用 ajax 发布到服务器），您将需要更新存储值，以便后续更改正确地再次欺骗消息，但如果用户不更改，则不会欺骗消息保存后的任何东西