contenteditable元素的placeholder输入提示语设置方法
发布时间：2017-10-10 10:42:00 作者：佚名 
我要评论
我要评论这篇文章主要介绍了contenteditable元素的placeholder输入提示语设置方法,需要的朋友可以参考下
在某些情况下，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输入提示语设置方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
使用HTML5中的contentEditable来将多行文本自动增高
这篇文章主要介绍了使用HTML5中的contentEditable来将文本自动增高的方法,文章先对contentEditable这个HTML5中的新属性作了一个简单介绍,需要的朋友可以参考下2016-03-01设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
有些Weber可能没有用过contenteditable这个属性，如果想编辑一个DIV里面的内容，这个属性是一个非常不错的选择2014-06-11
当div设置contentEditable=true时,重置其内容后无法光标定位
这篇文章主要介绍了解决当div设置contentEditable=true时,重置其内容后无法光标正确定位。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，2020-10-16
最新评论