Edit cursor not displayed on Chrome in contenteditable

When you open this page (see Live demo) with Chrome :

<span id="myspan" contenteditable=true></span>

CSS :

#myspan { border: 0; outline: 0;}

JS :

$(myspan).focus();

the contenteditable span has focus (you can start to write things and you will see that it already had focus), but we don't see the "I" edit cursor.

How to make that this cursor is displayed ? (Remark : outline:0 is needed, as well as the fact that the span is empty even with no white space).

Note : With Firefox, the cursor is displayed.

Answer

September 17, 2014

KyleMit

This just has to do with the way an empty ContentEditable area is rendered. To prove it's not about the focus, add some text to your editable div, and then delete it. When the last character is gone, the cursor will disappear

From the question Setting the caret position to an empty node inside a contentEditable element

The selection/range model is based around indexes into text content, disregarding element boundaries. I believe it may be impossible to set the input focus inside an inline element with no text in it. Certainly with your example I cannot set focus inside the last element by clicking or arrow keys.

It almost works if you set each span to display: block, though there's still some highly strange behaviour, dependent on the existence of whitespace in the parent. Hacking the display to look inline with tricks like float, inline-block and absolute position make IE treat each element as a separate editing box. Relative-positioned block elements next to each other work, but that's probably impractical.

You could also try adding a zero-width character like 

document.getElementById('myspan').focus();

#myspan {
    border: 0;
    outline: 0;
}

<span id="myspan" contenteditable="true">&#8203;</span>