title: empty contenteditable span on focus
body: <p>I'm trying to realise something I thought would be easy.</p>
  
  <p>When an user focus on one of my contenteditable span, I want to empty it if it contains a default text.</p>
  
  <p>When he loses focus, if he didn't write anything, I want to restore the default text.</p>
  
  <p>Here's my code :</p>
  
  <pre><code>content.focus(function() {
      if ($(this).html() === "Text"){
          $(this).html(""); //not working
          //$(this).empty(); //not working
      }
      console.log($(this)[0]);
  });
  content.blur(function() {
      if ($(this).html() === ""){
          $(this).html("Text");
      }
  });
  </code></pre>
  
  <p>It's working well when the focus is obtained by pressing tab.</p>
  
  <p>Nevertheless, when the user click on the div, it's not working. It is emptying the span, but if he didn't clicked before the first letter, or after the last letter, he can't write anything.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/Akatsukle/10r2gasq/" rel="nofollow">demo</a>.</p>