contenteditable型的编辑框，实现placeholder的方式有两种
第一种，Css的实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
width:380px;
height:50px;
border:1px solid #e1e1e1;
-webkit-user-modify:read-write-plaintext-only;
}
.text:empty:before{content: attr(placeholder);color:#bbb;}
.text:focus{content:none;} </style>
</head>
<body>
<div class="content text" contenteditable="true" placeholder="你想说什么"></div>
</body>
</html>
但是，这种方式存在一个漏洞或问题：如果在编辑框里直接回车，然后再删除，就不会再出现placeholder里的提示内容了、经过分析，发现回车的时候会在
<div class="content text" contenteditable="true" placeholder="你想说什么"></div>添加内容。
如果加了 -webkit-user-modify:read-write-plaintext-only;则增加两个<br/>标签
否则加了两个<div><br/></div>标签。
当增加的是两个<br/>标签，删除只能删除一个标签，余下一个标签，导致empty判断为false。
当增加的是两个<div><br/></div>标签，多按一次删除还是可以出现提示文字，但是用户体验就不佳了。
这里确实很疑惑。毕竟我只敲了一次回车键，为啥会出现两个标签。只有第一次回车键才会出现该情况。往后就正常了、
所以，最终采用了第二种方式。去判断了多余的未删掉的一个标签。
第二种，Js的实现方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
width:380px;
height:50px;
border:1px solid #e1e1e1;
-webkit-user-modify:read-write-plaintext-only;
}
.text::after {
content: attr(placeholder);
position: absolute;
top: 10px;
color: #a9a9a9;
}
</style>
</head>
<body>
<div class="content text" contenteditable="true" placeholder="你想说什么"></div>
<script src="js/jquery-2.1.4.min.js"></script>
<script> $('.placeholder').on('input', function(){ var htm = this.innerHTML;
if (htm.length!= 0 && htm!='<br>') {
$(this).removeClass('text');
} else {
$(this).addClass('text');
}
}); </script> </body>
</html>
这方面资料很少，所以我也不是很明白是为啥。暂且先这样解决吧。