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

Question

当我的div元素为空时,我想向用户显示一些文本.

我已经尝试向我添加占位符属性div但文本未显示.

<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)
}

演示

Answer 2

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

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

请参阅如果可编辑div没有文本而不是设置占位符

Answer 3

这也可以通过使用普通CSS 而不使用contentEditable属性来实现。

使用：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>