zhizhesoft

  • 首页
ZHIZHESOFT
zhizhesoft
  1. 首页
  2. 1.前端基础
  3. 正文

contenteditable元素的placeholder输入提示语设置

2022年8月1日 22点热度 0人点赞 0条评论

在某些情况下,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兼容性也是差不多的

 

标签: contenteditable placeholder
最后更新:2022年8月14日

risingsun

这个人很懒,什么都没留下

点赞
< 上一篇
Search

COPYRIGHT © 2022 zhizhesoft. ALL RIGHTS RESERVED.