码迷,mamicode.com
首页 > 其他好文 > 详细

div的contenteditable和placeholder蹦出的火花

时间:2016-02-02 17:47:40      阅读:7533      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

这个时候就用到了contenteditable和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;
        }

看看最终效果:

技术分享

技术分享

ok,解决了

div的contenteditable和placeholder蹦出的火花

标签:

原文地址:http://www.cnblogs.com/guoyansi19900907/p/5178110.html

(4)
(6)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!