So, I've knocked together some javascript to detect changes on a page in the Content area which prompts users if they've not saved their changes.

I'd appreciate it if you can give it a whirl on an Umbraco install of your choice to see if it works well there too.

It's potentially a very handy script for clients who keep 'loosing' data because they keep forgetting to click the Save or Save&Publish button!

You can run it through the Console in Firebug or the Chrome inspector :)

   var formChanged = false;
    var contentChangedMessage = 'You have made changes on this page that you have not saved.\nIf you navigate away from this page you will loose your unsaved changes.';

// We can't simply use the Change event, as that requires user interaction and won't work
// for hidden input fields (e.g. content/node picker, etc).
// Additionally by comparing pre/post values, we don't end up showing the message if a user has 'fondled' an input, but not changed the actual value
// (e.g. added a full-stop, then deleted it)

$(document).ready(function() {



     // for all controls, non-hidden
    $('iframe#right').contents().find('form#form1 input[type!=hidden], form#form1 textarea,form#form1 select').change(function() { 
        handleFormChanged();
    }); 

    // store tinymce value
    $('iframe#right').contents().find('iframe#body_prop_pageContent_ifr').contents().find('body#tinymce').each(function() { 
        $(this).data('initial_value', $(this).html());
    }); 

    // for hidden controls, store the original value to compare with later
     $('iframe#right').contents().find('form#form1 input[type=hidden]').each(function (i) {
          $(this).data('initial_value', $(this).val());
     });

   // for general 'leaving the page' requests
   window.onbeforeunload = function() { 
      checkFormForHiddenInputChanges();
      if (formChanged) {
        return contentChangedMessage;
      }
   };

   // for all Umbraco iframe content requests
   parent.right.onbeforeunload = function () {
      checkFormForHiddenInputChanges();
      alert(formChanged);
      if (formChanged) {
        return contentChangedMessage;
      }
   };

   // make sure we stop the content var when either save button is clicked
   $('iframe#right').contents().find('input#body_TabView1_tab01layer_save').click(function(){
        window.onbeforeunload = null;
        formChanged = false;
   });
   $('iframe#right').contents().find('input#body_TabView1_tab01layer_publish').click(function(){
        window.onbeforeunload = null;
        formChanged = false;
   });

});

function checkFormForHiddenInputChanges(){
     // compare hidden input text values
     $('iframe#right').contents().find('form#form1 input[type=hidden]').each(function() {
          if ($(this).val() != $(this).data('initial_value')) {
               handleFormChanged();
          }
     });

     // compare tinymce values
    $('iframe#right').contents().find('iframe#body_prop_pageContent_ifr').contents().find('body#tinymce').each(function() {
          if ($(this).html() != $(this).data('initial_value')) {
               handleFormChanged();
          }
     });
}

function handleFormChanged() {
     formChanged = true;
}

Things to be aware of:

1. The Change event is used for most inputs, as it's fired by user interaction
2. For hidden inputs and TinyMCE we have to compare past/current values to see if they've changed
3. Some browsers such as Firefox won't let you customise the "onbeforeunload" message and only show their generic "this site thinks you've made changes and not saved them.." message.