title: How to save text to a div using JavaScript onmouseout
body: <p>Good morning all. I have a div that I'm able to save text to when I click a save button but what I would like is if the text would just automatically save on an onmouseout event. For example:</p>
  
  <p>I have a div and two buttons (Save and Cancel). The user is currently able to mouse over the current text data inside the div, click on the text and they can then edit said text. The only way they can save this text is by clicking the save button. Is there a way to use onmouseout to save the text so that the user simply has to click and edit the text, then click away and have it saved?  Thanks!</p>
  
  <p>Ok, so the code below is what I have thus far but it just doesn't seem to work. I'm not worried about the save code b/c I already have that elsewhere. I'm just trying to get it to where I can type in the text, get onBlur to fire, and have the HTML revert back to what it looked like before I clicked the text. As of right now I can click it and the textbox within the div appears but when I click outside of the div, the textbox stays visible. Any ideas?</p>
  
  <pre><code>function setClickable() {
          $('#editInPlace').click(function() {
              var textarea = '&lt;div onBlur="saveChanges()&gt;&lt;textarea rows="3" cols="30"&gt;' + $(this).html() + '&lt;/textarea&gt;';
              //var button = '&lt;div&gt;&lt;input type="button" value="SAVE" class="saveButton" /&gt; OR &lt;input type="button" value="CANCEL" class="cancelButton" /&gt;&lt;/div&gt;&lt;/div&gt;';
              var revert = $(this).html();
              $(this).after(textarea).remove();           
  
          })
  .mouseover(function() {
      $(this).addClass("editable");
  })
  .mouseout(function() {
      $(this).removeClass("editable");
      saveChanges(this, revert);
  });
      };
  
      function saveChanges(obj, cancel) {
          if (!cancel) {
              var t = $(obj).parent().siblings(0).val();
  
              //need some post code for saves
  
          }
          else {
              var t = cancel;
          }
          if (t == '') t = '(click to add text)';
          $(obj).parent().parent().after('&lt;div id="editInPlace"&gt;' + t + '&lt;/div&gt;').remove();
          setClickable();
      }   
  </code></pre>