前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!
前端小菜鸡之菜鸡互啄,公众号:前端开发爱好者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>
效果展示:
兼容性:
整体来说在
Chrome
Edge
上兼容性比较好,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-modify
contenteditable
都可以让元素具有类似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) })
很赞 👍👍👍