45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:如何设置contenteditable元素的placeholder输入提示语?

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

2017-11-22 08:46:59 来源:www.45fan.com 【

如何设置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浏览器兼容性

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

PS::focus兼容性也是差不多的

总结

以上所述是小编给大家介绍的contenteditable元素的placeholder输入提示语设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对路饭网站的支持!


本文地址:http://www.45fan.com/dnjc/94050.html
Tags: placeholder 元素 contenteditable
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部