Question

我试图为contenteditable div设置占位符，但这里有问题：占位符出现并抵消真实文本，即使div失去焦点，即使它不是空的。

HTML：

<div contenteditable="true" placeholder="Enter the text">
    <br>
</div>

...我必须始终留下<br>来杀死巨大的光标（主题中的那些）。我这里没有使用display: block。

CSS：

[contenteditable=true]:nth-child(1):only-child:not(:focus):before {
    content: attr(placeholder);
    color: darkgrey;
}

...因为div的空状态有一个孩子，我试图告诉它css，但它没有效果。

JSFiddle：http://jsfiddle.net/3wM36/。在div中键入内容并带走焦点。

如何解决这个问题？

Answer 1

您无法根据子选择器选择具有CSS选择器的元素。如果您希望模拟placeholder属性对可编辑div元素的影响，则无需进行此类选择。 placeholder的工作方式是，当字段中没有用户输入时显示，此具有对应项：您可以测试元素是否为空（即没有内容 - 没有子元素，也没有纯文本）。例如：

<style>
[contenteditable=true] {
    border: solid 1px; /* Just to show what the area is. */
    min-height: 1.2em;
}
[contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    color: darkgrey;
}
</style>
<div contenteditable="true" data-placeholder="Enter the text"></div>

Answer 2

你在找这个吗？

只需删除占位符属性

即可

<div contenteditable="true">
    <br>
</div>

的CSS：

    div {
        display: inline-block;
        width: 200px;
        border: 1px solid gainsboro;
        position:relative;
    }
    div[contenteditable=true]:nth-child(1):only-child:not(:focus):before{
        content:'Enter the text';
        color: darkgrey;
        position:absolute;
    }

jsFiddle Demo

HTML5 contenteditable div：仅当div有1个子节点时才显示占位符

2 个答案: