分享程序员开发的那些事...
更新时间：2022-08-12 21:46:42
前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取！！！
前端小菜鸡之菜鸡互啄，公众号：前端开发爱好者xy哥怒肝，前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取！！！
哈喽,大家好 我是
xy????????????. 今天来聊一聊一直被大家忽略的 CSSuser-modify属性 ???? HTMLcontenteditable属性。为什么突然想来聊一聊这两个属性呢？也是因为有个粉丝在学习前端过程中在开发一个论坛类型的网站，在话题评论地方想要实现类似于掘金#添加话题，效果如下：预选方案
- 使用 input 输入框配合 js 实现
- CSS
user-modify属性- HTML
contenteditable属性⭐️掘金是怎么实现的⭐️
作为前端工程师，第一反应肯定是 f12 打开控制台，查看源代码：
我们可以发现，元素div上被添加了
contenteditable=‘true’属性????
contenteditable到底能做什么？？？别急，一步一步来看????先来看看三种方式对比????：
- 第一种方式相对来说实现复杂度比较高，扩展性不太好，直接不建议考虑；
- 第二种方式 css
user-modify属性，可以让 html 标签变得可编辑，动态插入话题标签，给话题标签增加自定义样式；- 第三种方式 html
contenteditable属性，实现和第二种基本类似
既然不考虑第一种方案了，那下面我们就来第二种第三种方案具体如何来实现上述效果
CSS
user-modify属性
官方解释：
user-modify属性，用来控制用户能否对页面文本进行编辑。
-webkit-user-modify:
read-only(内容只读)read-write(内容可读写,支持富文本)read-write-plaintext-only(内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失;内容类似于以纯文本显示。)
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>公众号：前端开发爱好者</title> </head> <style> .cssContent { width: 500px; min-height: 100px; height: auto; border: 1px solid #1e80ff; -webkit-user-modify: read-write; outline: none; caret-color: #1e80ff; text-indent: 20px; } .topic_theme{ color: #1e80ff; } </style> <body> <div class="cssContent"> <p class="topic_theme">#公众号：前端开发爱好者#</p> </div> </body> </html>
效果展示：
兼容性:
整体来说在
ChromeEdge上兼容性比较好,Firefox目前部分支持。但是要注意的是read-write-plaintext-only这个值,基本上已经弃用了。所以个人建议⭐️慎重使用⭐️
HTML
contenteditable属性
contenteditable属性规定元素内容是否可编辑。如果元素未设置contenteditable属性，那么元素会从其父元素继承该属性。
contenteditable
true规定元素可编辑false规定元素不可编辑
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>公众号：前端开发爱好者</title> </head> <style> .cssContent { width: 500px; min-height: 100px; height: auto; border: 1px solid #1e80ff; outline: none; caret-color: #1e80ff; text-indent: 20px; } .topic_theme{ color: #1e80ff; } </style> <body> <div class="cssContent" contenteditable='true'> <p class="topic_theme">#公众号：前端开发爱好者#</p> </div> </body> </html>
效果展示：
兼容性:
整体来说在大部分
主流浏览器包括IE兼容性都是非常出色。所以个人建议⭐️推荐使用⭐️
给可编辑元素增加事件监听
既然
user-modifycontenteditable都可以让元素具有类似input的可编辑性，那么是否具有input的监听事件呢？
上手一试：给可编辑元素
div添加 idcssContent
<div id='cssContent' class="cssContent" > <p class="topic_theme">#公众号：前端开发爱好者#</p> </div>
尝试绑定键盘事件：
var divFa = document.getElementById('cssContent') divFa.addEventListener('keyup',(e)=>{ console.log('键盘keyup事件',e.target.outerText) })
很赞 ????????????