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

前端开发爱好者
1,653 阅读3分钟

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

前言

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

预选方案

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

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

作为前端工程师，第一反应肯定是 f12 打开控制台，查看源代码：

我们可以发现，元素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>

效果展示：

兼容性:

整体来说在 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 添加 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)
    })

很赞 👍👍👍

写在最后

公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞 👍 或者➕关注 都是对我最大的支持。

avatar
文章
阅读
粉丝