title: Caret inside contenteditable div on Chrome
body: <p>I am using a conteneditable div control and when the user first clicks inside this control I want to delete all text and position the caret at the beginning. So far my code is working on IE, Opera and Firefox, but on Chrome it seems that the caret does not show up where I am trying to set it. My code is as follows:</p>
  
  <pre><code>&lt;div id="mydiv" runat="server" contenteditable="true"&gt;
     &lt;div id="innerDiv" runat="server"&gt;
         &lt;span onclick="javascript:DisableClick();"&gt;text I want to delete on first click&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  function DisableClick()
  {
     document.getElementById("&lt;%=innerDiv.ClientID %&gt;").innerHTML = "";
     if(document.createRange)
     {
        var range = document.createRange();
        range.selectNodeContents(document.getElementById("&lt;%=innerDiv.ClientID %&gt;"));
        range.collapse(false);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
     }
  }
  </code></pre>
  
  <p>Deleting the text makes the caret completely disappear on Chrome. However, the weird thing is that if instead of setting the innerHTML for the div to the empty string I specify some text, like document.getElementById("&lt;%=innerDiv.ClientID %>").innerHTML = "a"; the caret is displayed.</p>
  
  <p>Any ideas why? Thanks!</p>