光标出现在 contenteditable div 上方，带有占位符和 :before 属性答案

【问题标题】：Cursor appears above contenteditable div with placeholder and :before attribute光标出现在 contenteditable div 上方，带有占位符和 :before 属性
【发布时间】：2017-02-24 02:02:08
【问题描述】：

<div contenteditable="true" id="sud"></div>

#sud
{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position:relative;
}

#sud:empty:before
{
    display:inline;
    content:"hello";
    position:absolute; 
    top:0; left:0;
}

这适用于所有浏览器，但在 IE10 中，光标出现在 div 上方。有人可以为此提出解决方案吗？

JSFiddle：http://jsfiddle.net/KX6BY/8/

【问题讨论】：

您必须删除position:absolute;

标签： css contenteditable placeholder

【解决方案1】：

DEMO

此解决方案的缺点/优点：此解决方案将隐藏文本以聚焦元素，这是一个缺点，但它或多或少是一件好事，因为许多人使用 javascript 来隐藏输入中的占位符文本领域焦点。

详情：

1) 内容不应该是 css 的一部分，因此我将内容从 :before 移动到 html 中的 data-initial-content 属性。

2) .sud:empty:before 仅当 div 为空且用户聚焦 div 时，我使用此选择器 .sud:focus:before 将 display:none; 设置为 display:none;，才将初始内容放在其中。

3) 在这个解决方案中不需要position: absolute。

4) 还添加了overflow-y:auto 和一些padding 以提高可用性和视觉效果。

【讨论】：

通过去掉position:absolute，在IE浏览器中，光标会出现在content属性值之后。在这种情况下，它会出现在“Hello”之后。
检查我更新的答案~在 IE 上测试我的新解决方案，因为我遇到了 IE fiddle 的问题 :(
@ImranBughio 见my updated fiddle。当您在输入多行文本后按 Enter 键时。光标错位了。
Demo 我没有将innerHTML 设为空，而是使用香草版本的jquery 函数empty()，我还在.sud div 上添加了cursor: text;。现在我不知道为什么它会起作用而不是 innerHTML 你必须check this 才能知道