HTML <div>元素contenteditable文本框如何激活placeholder属性

自HTML5开始，
<div></div>、<p></p>以及<span></span>等HTML纯文本元素
新加入了一个contenteditable属性。

通过这个contenteditable属性，前端开发者就可以将这些原本的纯文本元素改造成像
<input></input>文本输入框或者<textarea></textarea>文本输入域
这样的HTML文本输入元素。

不过，由
<div></div>、<p></p>以及<span></span>等HTML纯文本元素
改造而成的文本输入元素却存在着一个很大的问题，那就是原生不支持placeholder属性。

不过，虽然这些元素原生不支持placeholder属性，但是我们还可以通过控制CSS样式：

在div[contenteditable]元素为空的时候，将placeholder的属性值赋予给它；

在div[contenteditable]元素获取焦点的时候，又将它的文本清空；

从而达到模仿文本输入元素placeholder属性的目的，代码如下：

div[contenteditable]:empty:before
{
	content: attr(placeholder);
	color: #CCCCCC;
}
div[contenteditable]:focus
{
	content:none;
}