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而不是bind这样做，你自动支持inplace编辑。

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

以下代码的想法是迭代您要监视的所有元素并存储原始值。然后比较卸载值，如果发现变化，则应给出警告。

$(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将数据发布到服务器），您将需要更新商店值，以便后续更改可以再次正确地重新调整消息，但如果用户没有消息被禁止保存后不会改变任何内容

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

2 个答案: