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

发布时间：2022-12-31 10:10:31 来源：网络

.

我发现我好像变了，原来每当人成长的时候都会改变。生命本该有意义，我们绝不是白来一场。

在某些情况下，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输入提示语设置方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

到此这篇关于contenteditable元素的placeholder输入提示语设置方法就介绍到这了。人远比自己想象的要，特别是当你回头看看的时候，你会发现自己走了一段自己都没想到的路。生活可以漂泊，可以，但灵魂必须有所归依。只要你地说出再见，生活一定会赐予你一个新的开始。更多相关contenteditable元素的placeholder输入提示语设置方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章: