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

相关文章
|
2月前
<select>标记和<option>标签的常用属性
<select>标记和<option>标签的常用属性
31 2
|
机器人
Typecho弹出find Input author error怎么解决
Typecho弹出find Input author error怎么解决
94 0
|
6月前
|
前端开发
前端知识笔记(一)———button的type属性
前端知识笔记(一)———button的type属性
321 0
|
JavaScript 前端开发 Python
brython | 获取input等标签的内容
brython | 获取input等标签的内容
118 0
|
前端开发
前端工作总结182-element-ui el-table sortable属性 参数详解
前端工作总结182-element-ui el-table sortable属性 参数详解
399 0
前端工作总结182-element-ui el-table sortable属性 参数详解
|
JavaScript
javascrip通过id获取标签案例
javascrip通过id获取标签案例
91 0
|
JavaScript 前端开发
【JavaScript】关于select怎么获取option的值
【JavaScript】关于select怎么获取option的值
108 0
【JavaScript】关于select怎么获取option的值
|
Web App开发 JavaScript 前端开发
小小标签,强大功能——深藏不露的 <input>
<input> 虽只是一个看似简单的 HTML 表单元素,但它这么一个单一的元素,就有多达 30 多个属性(attribute),相信无论你是个小菜鸟还是像我一样写了 15 年 HTML 的老手,知道这点的时候还是会惊讶不已的。而且如果再加上全局属性那就更多了,例如最重要的 type 属性有超过20个可能的值!可以来简单看看 MDN 文档。
263 0
小小标签,强大功能——深藏不露的 <input>
|
搜索推荐
网页的标题标签(Title Tag)要怎么写才是最优化?
通过简单的观察就可以发现: 排在搜索引擎搜索结果前几页的网页或网站中,一般是这个网页或网站的标题标签(Title Tag)中包含着搜索关键词。所以,反过来,要让自己网页或网站排到搜索结果的前列,网页的标题标签(Title Tag)非常重要。
257 0