无法想象的游标不会出现

Question

当contenteditable元素为空时，如何使焦点上的光标出现在焦点上？请参阅下面的代码和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';

Answer 1

你的JavaScript很好，你的问题是inline-block正在折叠到0宽度和0高度，因为它内部没有任何内容。因此，它无法单击，只能在选项卡上等时获得焦点。您可以将显示属性更改为block或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>

{{1}}