当使用文本编辑的时候,首先会使用 textarea ,但是,这个里面不能加入其它标签,也就是不能富文本化。 于是可以使用 contenteditable 就是给 div 加上该属性。就变得丰富起来。使用的时候,发现有两个问题。 1、placeholder 无法正常使用,解决办法,是加上一段css: 1 2 3 4 5 6 7 .con:empty:before{ content: ...
第一种,Css的实现方式: <!DOCTYPE html>Document.content{width:380px;height:50px;border:1px solid #e1e1e1;-webkit-user-modify:read-write-plaintext-only;}.text:empty:before{content:attr(placeholder);color:#bbb;}.text:focus{content:none;} 但是,这种方式存在一个漏洞或问题:如果在编辑框里直接回车...
在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable。 然后可能需要像input、textarea有placeholder的输入提示语,但contenteditable的元素,placeholder是没用的,需要另外办法。 例子: HTML: AI代码助手复制代码 CSS: .con{...
contenteditable元素的placeholder输⼊提⽰语设置⽅法 在某些情况下，textarea是不够⽤的，我们还需要显⽰⼀些图标或者⾼亮元素，这就需要⽤富⽂本编辑器，⽽富⽂本编辑器本质上是HTML元素设置了contenteditable。然后可能需要像input、textarea有placeholder的输⼊提⽰语，但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;}...
在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable。 然后可能需要像input、textarea有placeholder的输入提示语,但contenteditable的元素,placeholder是没用的,需要另外办法。
> // 输入框获取光标 placehodlder消失 /*为空时显示 element attribute content*/ .publish_content:empty:before{ content: attr(placeholder); /* element attribute*/ /*content: 'this is content';*/ color: #C0C4CC; } // 注释掉这个输入框输入值后placehodler消失 /*焦点时...
以上代码片段演示如何使用 JavaScript 和 CSS 实现可编辑区域的占位符。我们首先在 HTML 中添加contenteditable属性和placeholder属性。然后,我们使用 CSS 设置占位符的样式。最后,使用 JavaScript 监听focus和blur事件,在输入区域中添加和删除占位符。
document.selection 的 createRange.input{ width:200px; min-height:24px; font-size:14px; padding:5px 8px; border:1px solid #ddd; } .input:empty::before { content: attr(placeholder); }
支持placeholder 模拟支持 textarea 的placeholder 特征: [contentEditable=true]:empty:not(:focus):before { color: #eeee; content: attr(placeholder) } 注意:在写HTML 时候,contenteditable Div 一定要闭合,不要留空或换行。 处理Chrome 下contenteditable div 自动产生多余结构 ...