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

星级:
HTML中,<div>元素contenteditable文本框并不能像<input>元素一样自带placeholder属性,但是可以通过CSS控制 div[contenteditable]:empty:before 以及 div[contenteditable]:focus 的content样式,将attr(placeholder)属性值赋予它,从而模仿<input>元素的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;
}


图像小部件