CODEWITHSUNDEEP
javascripthtmlgoogle-chromecontenteditablecaret
Crista23
Crista23

Reputation: 3243

Caret inside contenteditable div on Chrome

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:

<div id="mydiv" runat="server" contenteditable="true">
   <div id="innerDiv" runat="server">
       <span onclick="javascript:DisableClick();">text I want to delete on first click</span>
   </div>
</div>

function DisableClick()
{
   document.getElementById("<%=innerDiv.ClientID %>").innerHTML = "";
   if(document.createRange)
   {
      var range = document.createRange();
      range.selectNodeContents(document.getElementById("<%=innerDiv.ClientID %>"));
      range.collapse(false);
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
   }
}

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("<%=innerDiv.ClientID %>").innerHTML = "a"; the caret is displayed.

Any ideas why? Thanks!

Upvotes: 1

Views: 4035

Answers (2)

&#205;hor M&#233;
&#205;hor M&#233;

Reputation: 936

I've had a problem with a caret not showing up in empty lines on Chrome in contenteditable and a not-so-sexy fix I figured out was to place a div inside the contenteditable div and make all of the edits in that one. For some reason, the caret does show up then. But, of course, that div can be "accidentally" deleted by the user.

Chrome seems to have a bunch of these bugs.

Upvotes: 0

brainfrozen
brainfrozen

Reputation: 263

Set the style of your inner container to display:inline or display:inline-block or use a SPAN instead of a DIV. DIV elements are displayed as 'block' per default and Chrome does not show the caret in content-editable block elements without text content.

Upvotes: 3

Related Questions