Prevent an accidental Back Browse

Question

I have a client that just got the Apple Magic Mouse. We built a recipe website and she get very upset when she is inputting all the information for the recipe, then goes for her new mouse and accidentally scrolls to the right and it will do a Back Browse and all her info is lost. So she wants to warning/pop up to prevent this from happening on that page.

Any suggestions or point me to some JS that does this?

Answer 1

This is a basic 'warn before leave' script. When the user presses a key in the textarea, the user will be notified if (s)he is about to leave the page:

<script type="text/javascript">
var changes = false;
window.onbeforeunload = function(){
   if(changes){
      return "You're about to leave this page.";
   }
};
</script>
<textarea onkeypress="window.changes=true">recipe here</textarea>

Alternatively, you can store the contents of the textfield in a variable when the page loads and compare it afterwards. This will take away some confusion when the visitor just press the arrow keys in the textarea without actually modifying it.