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 2 · 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

contenteditable cursor doesn't appear

1 Answers1

Linked