user-modify VS contenteditable 【实现掘金沸点话题标签】

简介: user-modify VS contenteditable 【实现掘金沸点话题标签】

前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!

前端小菜鸡之菜鸡互啄,公众号:前端开发爱好者xy哥怒肝,前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!

前言

哈喽,大家好 我是xy👨🏻‍💻. 今天来聊一聊一直被大家忽略的 CSS user-modify 属性 🆚 HTML contenteditable 属性。为什么突然想来聊一聊这两个属性呢?也是因为有个粉丝在学习前端过程中在开发一个论坛类型的网站,在话题评论地方想要实现类似于掘金 # 添加 话题,效果如下:image.png

预选方案

  • 使用 input 输入框配合 js 实现
  • CSS user-modify 属性
  • HTML contenteditable 属性

⭐️掘金是怎么实现的⭐️

作为前端工程师,第一反应肯定是 f12 打开控制台,查看源代码:image.png我们可以发现,元素div上被添加了 contenteditable=‘true’ 属性🧐

contenteditable 到底能做什么???别急,一步一步来看🧐

先来看看三种方式对比💡:

  1. 第一种方式相对来说实现复杂度比较高,扩展性不太好,直接不建议考虑;
  2. 第二种方式 css user-modify属性,可以让 html 标签变得可编辑,动态插入话题标签,给话题标签增加自定义样式;
  3. 第三种方式 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>

效果展示:

image.png兼容性:

整体来说在 ChromeEdge 上兼容性比较好, Firefox 目前部分支持。但是要注意的是read-write-plaintext-only这个值,基本上已经弃用了。所以个人建议⭐️慎重使用⭐️

image.png

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>

效果展示:

image.png兼容性:

整体来说在大部分主流浏览器包括 IE 兼容性都是非常出色。所以个人建议⭐️推荐使用⭐️image.png

给可编辑元素增加事件监听

既然 user-modifycontenteditable 都可以让元素具有类似 input 的可编辑性,那么是否具有 input 的监听事件呢?

上手一试:给可编辑元素 div 添加 id cssContent

<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)
    })

很赞 👍👍👍image.png

相关文章
layui内部表单互动的实战案例:根据radio单选框自动改变input内容
layui内部表单互动的实战案例:根据radio单选框自动改变input内容
207 0
|
6月前
|
前端开发
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
413 0
|
6月前
|
前端开发
前端知识笔记(一)———button的type属性
前端知识笔记(一)———button的type属性
342 0
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
717 0
|
JavaScript 前端开发 Python
brython | 获取input等标签的内容
brython | 获取input等标签的内容
121 0
|
前端开发
前端工作总结182-element-ui el-table sortable属性 参数详解
前端工作总结182-element-ui el-table sortable属性 参数详解
405 0
前端工作总结182-element-ui el-table sortable属性 参数详解
|
JavaScript
javascrip通过id获取标签案例
javascrip通过id获取标签案例
92 0