您现在的位置是：网站首页> 编程资料编程资料

contenteditable元素的placeholder输入提示语设置方法使用HTML5中的contentEditable来将多行文本自动增高设置contenteditable属性可编辑HTML标签的内容(可代替textarea)当div设置contentEditable=true时,重置其内容后无法光标定位

2021-09-04 1143人已围观

简介 这篇文章主要介绍了contenteditable元素的placeholder输入提示语设置方法,需要的朋友可以参考下

在某些情况下，textarea是不够用的，我们还需要显示一些图标或者高亮元素，这就需要用富文本编辑器，而富文本编辑器本质上是HTML元素设置了contenteditable。

然后可能需要像input、textarea有placeholder的输入提示语，但contenteditable的元素，placeholder是没用的，需要另外办法。

例子：

HTML：

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

上一篇：关于图片与文字垂直方向不对齐问题的解决方法

下一篇：div+css样式自制带小三角的tooltips效果CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)纯CSS3实现自定义Tooltip边框涂鸦风格的教程用简单的jquery+CSS创建自定义的a标签title提示tooltip关于CSS Tooltips(鼠标经过时显示)的效果怎么用纯CSS制作带小三角的tooltip提示框纯css实现漂亮又健壮的tooltip的方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网