div的contenteditable和placeholder蹦出的火花

今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder.

在文本框中换行自然想到了textarea.

问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了.

这个时候就用到了contenteditable和placeholder

<!--
注意这里的div开始和结束标签必须在一行上面,若换行就看不到 placeholder了 
-->
<div class="con" contenteditable="true" placeholder="请输入描述内容..."></div>

 .con:empty:before{
    content: attr(placeholder);
    color:#bbb;
}
.con:focus:before{
    content:none;
}

现在boss觉得这个默认的placeholder好丑需要改改.继续搜:

.con:empty:before{
            content:attr(placeholder);
            font-size: 16px;
            color: green;
        }
        .con:focus{
            content:none;
        }

看看最终效果:

div的contenteditable和placeholder蹦出的火花

ok,解决了