专栏首页前端迷contenteditable跟style标签可真是天生一对

contenteditable跟style标签可真是天生一对

contenteditable是html的一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在许多不足跟问题,比如没有change钩子等,本文不作深入探讨❌

01

开胃

使一个div可以进行内容编辑:

<div contenteditable>点击我进行编辑</div>

乍一看,好像很普通,但是它可以解决一个textarea的一个痛点,那就是可以自适应高度,textarea可不行 ❕

正菜

假如... 把该属性加在style元素上呢?,是不是就可以在页面上直接编写样式并且自带"热更新"?因此有如下代码:

<head>
  <style contenteditable>
    html {
      background-color: #f1f1f1;
    }
  </style>
</head>

然后激动的切到页面上看效果,发现空空如也:

经过一番研究,想要在页面上编辑style元素,必须要满足以下两点:

  • style元素必须放在body元素内
  • style元素要设置display: block;

于是代码变成了这样:

<body>
  <style contenteditable>
    html {
      background-color: #fff;
    }
  </style>
</body>

于是就有了以下场景:

缺点

存在的缺点很明显,我也很刻意的去避开,那就是代码无法换行,因为回车后,内容会新增div元素,破坏了原有的文本结构:

解决

网上冲浪查资料后,发现了一个css属性 - user-modify,可取值为以下四个:

  • read-only
  • read-write
  • write-only
  • read-write-plaintext-only

我们取第四个值就行,定义内容只可输入纯文本,因此回车也就不会产生div?

document.title = "user-modify跟style标签可真是天生一对?";

改造后的代码如下:

<style class="textarea" style="display: block; -webkit-user-modify: read-write-plaintext-only;">
  html {
    background-color: #fff;
  }
</style>

于是就有了以下场景:

细心的人又发现了,我又刻意的不输入Tab制表符,是的没错,因为按Tab键会跳焦(失去焦点)!所以应该需要用脚本去处理,具体网上冲浪一大堆哈 ?

本文分享自微信公众号 - 前端迷(love_frontend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • xml文件-1

    1969 gml(通用标记语言) [主要的目的是要在不同的机器进行通信的数据规范]

    用户5927264
  • Android下使用objdump查看导出的函数表

    这里推荐第二种方法, 因为遇到问题相对好查,nm在google里稍难匹配到你要的意思。

    望天
  • Python 爬虫第一篇(urllib+regex)

    爬虫的主要用途即从网站上获取网页,并将网页中的有用信息解析出来。从网站上获取网页内容可以通过 python 内置的 urllib 模块来实现,至于信息的解析说起...

    keinYe
  • jQueryEasyUI 的入门

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI拖动效果</title> <...

    用户5927264
  • Web前端开发基础:HTML、CSS、JavaScript分别实现什么功能?

    相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML、CSS、JavaScript,那么这三个都是分别实现什么功能的呢?下面...

    用户5827212
  • 海康萤石摄像头C3W的Demo使用笔记(一)

    海康萤石摄像头提供了第三方开发的SDK套件。各个模块选择的网址是:https://open.ys7.com/bbs/supportcenter.html#ser...

    用户5935416
  • SpringMVC 的常用注解

    value:指定请求的实际地址,指定的地址可以是URI Template 模式(后面将会说明); method: 指定请求的method类型, GET、POS...

    用户5927264
  • XSS相关Payload及Bypass的备忘录(下)| 文末有打包好的Payload

    上述payload都打包在了下面链接中,自己现行研究一番,在哪里使用,可以做些模糊测试工作,具体自己研究研究吧,最后 全部.txt 是我将其中的payload都...

    7089bAt@PowerLi
  • Python 爬虫之网页解析库 BeautifulSoup

    BeautifulSoup 是一个使用灵活方便、执行速度快、支持多种解析器的网页解析库,可以让你无需编写正则表达式也能从 html 和 xml 中提取数据。Be...

    keinYe
  • web 编写优秀 CSS 代码的 8 个策略

    编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性。

    用户4962466

扫码关注云+社区

领取腾讯云代金券