contenteditable cursor doesn't appear

Question

How to make contenteditable cursor appear on focus when the contenteditable element is empty? See code below and JSFiddle to demo.

HTML

<p>type here:
    <span id="contentEditable-name"></span>
</p>

JS:

var contenteditable_el = document.getElementById('contentEditable-name');
  contenteditable_el.contentEditable='true';

score 3 · Answer 1 · answered Feb 01 '16 at 20:11

Your JavaScript is fine, your problem is that the <span> is collapsing to 0 width and 0 height, because there's nothing inside of it. Thus, it cannot be clicked, and only receives focus when tabbed onto, etc. You can change the display property to inline-block or block and set a width on the element to solve this problem.

var contenteditable_el = document.getElementById('contentEditable-name');
contenteditable_el.contentEditable='true';

// Try commenting these two lines out
contenteditable_el.style.display = "inline-block";
contenteditable_el.style.minWidth = "20px";

contenteditable_el.style.outline = "1px solid red";

<p>type here:
<span id="contentEditable-name">

</span>
</p>

I need it to be a span because I want the text to be inline with another element. — tim peterson, Feb 01 '16 at 20:15
That's why I used `inline-block`. Or, you can use ` ` as content to give the element width. Or you can call `.focus()`. — Hatchet, Feb 01 '16 at 20:21

score -1 · Answer 2 · answered Apr 08 '23 at 18:02

I found that the HTML contents generated by the contenteditable code inside the div can have zero width and this causes the cursor to hide. Adding CSS such as this fixed it for me:

.contenteditablecontrol * {
    min-width: 5px;        /* arbitrary value to stop the cursor disappearing at the end of the editable text */
}

contenteditable cursor doesn't appear

2 Answers2

Linked