Confirm dialogue when leaving text in textarea? [Plugin]

Question

Just noticed another Stack Exchange feature that one also sees in Gmal, Google Docs, etc.  Kind of like when closing a word processor document, it asks you if you are sure you want to discard text you've entered on the page.

Made me think of the request for a "drafts" plugin, and the fact that I had recently lost a fairly lengthy answer to someone's question by closing the wrong tab.  So, here's a simple plugin that seems to do what these sites do - give you a warning if you are leaving either the "ask" page or a question page, having entered text into a textarea (not input[text]).  Here's what it looks like in Firefox on Ubuntu:

Plugin is here:

https://github.com/NoahY/q2a-confirm

As always, feedback is appreciated.

Answer 1

Unfortunately the plugin above does not work with CKEditor...

So I created a free plugin for that, check it out at: http://www.question2answer.org/qa/32331/new-free-plugin-warn-on-leave-by-q2apro-com

 

FYI, a javascript / jquery solution is the following found here:

Hint: You can add the javascript code to page.js or another js file that gets loaded by q2a on each site:

$(document).ready(function() {
  /* Our ckeck-variable which tells us if we need to warn the user before leave or not
  initialized with 'false' so the don't bother the user when we don't have to. */
  var warn_on_leave = false;

  /* Here we check if the user has made any 'changes' actually we just check if he has pressed a key in ckeditor.
  'cause you have to do that it's a proper solution.
  This Code is NOT written in jquery, 'cause I haven't found a proper way to combine jQuery and CKEditor eventhandling
  The first line is an event-listener which is called everytime we change our focus (i.e. click in our ckeditor, a link, etc)
  The second 'CKEDITOR.currentInstance' is a method which returns our currently focused element. Here we listen if the user presses a key.
  The 'try...catch' Block is needed so we don't produce an error when our focus is 'null'. */
  CKEDITOR.on('currentInstance', function() {               
    try {
      CKEDITOR.currentInstance.on('key', function() {       
        warn_on_leave = true;
      });
    } catch (err) { }                                       
  });
 

  // Wen don't want to annoy the user with a popup, when he's about to save his/her changes
  $(document.activeElement).submit(function() {
    warn_on_leave = false;
  });

  // Finally we check if we need to show our popup or not
  $(window).bind('beforeunload', function() {
    if(warn_on_leave) {
      return 'Attention: Your text has not been saved!';
    }
  });
});

#

PS: I had problems with   $(document.activeElement).submit(function() {warn_on_leave = false;});   which was not working in my setup. If you have the same problem (i.e. submit is not triggered at all), replace this line with:

$("input:submit").click( function() {
    warn_on_leave = false;
    return true;
});