在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable。
然后可能需要像input、textarea有placeholder的输入提示语,但contenteditable的元素,placeholder是没用的,需要另外办法。
例子:
HTML:
<div class="con" contenteditable="true"></div>
CSS:
.con{width: 400px;height: 400px;border: 1px solid #4ec844;outline: none;
}
.con:empty:before{ content: '说点啥好呢?'; color: gray;
}
.con:focus:before{content:none;
}
:empty浏览器兼容性
PS::focus兼容性也是差不多的