placeholder 是HTML5中input的属性,但该属性并不支持除input以外的元素
但我们可以使用Css
before选择器来实现完全相同的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div+placeholder</title>
<style>
.rich{
color:balck;
width:100px;
height:100px;
border: 1px solid red;
margin: 20px 50%;
}
/*为空时显示 element attribute content*/
.rich:empty:before{
content: attr(placeholder); /* element attribute*/
/*content: 'this is content';*/
color:#red;
}
/*焦点时内容为空*/
.rich:focus:before{
content:none;
}
</style>
</head>
<body>
<div class='rich' contenteditable="true" placeholder='当 element 内容为空时,我就会出现'></div>
</body>
</html>
效果：
参考：
HTML5
placeholder
线上Demo:
DIV实现css placeholder效果