Question

<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/

Answer 1

<强> DEMO

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

<强>详细信息：

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

2）.sud:empty:before只在div为空时放置了初始内容。当用户关注div时，我使用此选择器:before将display:none;设置为.sud:focus:before。

3）此解决方案中不需要position: absolute。

4）还添加了overflow-y:auto＆amp;一些padding可用性＆amp;视觉效果。

光标出现在具有占位符和：属性之前的contenteditable div上方

1 个答案: