Question

当我的div元素为空时，我想向用户显示一些文字。

我尝试向div添加placeholder属性，但文字未显示。

<div placeholder="Enter the text"> </div>

如果我的div元素为空，我该如何显示消息？

Answer 1

使用javascript有很多选项，但是如果你想在css中这样做。试试这个：

HTML：

<div contentEditable=true data-text="Enter text here"></div>

的CSS：

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}

Demo

Answer 2

我已经通过此测试回答了这样的问题：http://codepen.io/gcyrillus/pen/hzLIE

div:empty:before {
  content:attr(data-placeholder);
  color:gray
}

请参阅If editable div have no text than set placeholder

Answer 3

这也可以在不使用contentEditable属性的情况下使用普通CSS实现。

使用:empty伪类和::before伪元素，您可以将占位符添加到空元素。

以下示例为未定义div属性的data-placeholder元素提供了回退占位符。

示例：

div:empty::before {
  color: grey;
}
div[data-placeholder]:not([data-placeholder=""]):empty::before {
  content: attr(data-placeholder);
}
div:empty::before {
  content: 'fallback placeholder';
}

<div data-placeholder='data- placeholder'></div>
<br>
<div></div>

Answer 4

假设你真正想做的是让用户输入一些文本并在输入字段中显示一些占位符，这就是你可以使用的：

<input type="text" value="Enter the text" onfocus="if(this.value=='Enter the text'){this.value='';}" onblur="if(this.value==''){this.value='Enter the text';}" />

当然，您可以将输入包装在div中。

<div><input [...] /></div>

您可以在行动here

中看到这一点

是否可以在div标签中添加占位符

4 个答案: