How to check that something has been changed in the page?

Question

如果我要在页面中进行任何更改，然后尝试不保存就导航至其他位置，我想显示一条错误消息，询问是否要保存更改。

Answer 1

onbeforeunload event is what you need. Bind a function to it which returns a string to be displayed (for Chrome only, other browsers will show default message) whenever user tries to navigate away (pressing back, forward, clicking on a link, closing the tab or window itself) from the page.

A confirm like dialog is presented to the user, if user chooses to proceed, the action that he requested is executed. If he chooses to stay on the page nothing happens.

$('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";
     };
});

When the changes are saved simply set window.onbeforeunload = null to remove the message when user tries to navigate away from the page.

Answer 2

There a few things to consider.

What elements do you use for input. This will affect your elementSelector (used in the code below) If you use plugins such as jeditable you have to know more than the elements you use for input. You'll need to know the elements used to display the values as well.

if you bind to change, as in sudhirs answer, I suggest doing this with live instead of bind that way you automagically support inplace editing.

The flag solution where you set a flag on the change event does not cover the case where the user changes the value back to the original.

The idea of the code below is to iterate all the elements you want to monitor and store the original value. Befor unloading the values are then compared an if a change is found a warning should be given.

$(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");
      }
   };
});

if the user stays on the page after saving (Ie. the data is posted to the server using ajax) you will need to update the store values so that subsequent changes correctly trickers the message again but no message is trickered if the user does not change anything after saving