专栏首页不为人知的前端技巧user-modify跟style标签可真是天生一对?
原创

user-modify跟style标签可真是天生一对?

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

开胃

使一个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 style="display: block;">
    html {
      background-color: #fff;
    }
  </style>
</body>

于是就有了以下场景:

缺点

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

解决

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

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

CSS user-modify属性行为表现测试实例页面

我们取第四个值就行,定义内容只可输入纯文本,因此回车也就不会产生div?,改造后的代码如下:

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

于是就有了以下场景:

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

总结

麦当劳的家有金桶挺好吃的

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何把css'content的操作跟价值发挥到最大💢

    content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧?

    聪明的汤姆
  • 如何把css'content的操作跟价值发挥到最大💢

    content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧?

    聪明的汤姆
  • 这些不常用的Web API真的有用吗? 别问,问就是有用🈶

    本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。 以下案例能配动图的我尽量去配了,以免内容枯草乏味...

    聪明的汤姆
  • Vue 3 新特性:在 Composition API 中使用 CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 ...

    江米小枣
  • RoundCube Webmail邮件正文存储型XSS(CVE-2015-1433)

    这是前段时间发现的一个漏洞,可能又让一些人深恶痛绝了,见谅。自从当年自己那个gnuboard getshell被晾了半年捂烂了以后,感觉国外的洞还是提交了吧,捂...

    phith0n
  • CentOS 6.X 安装中文字体

    由于业务需要,需要对CentOS6.9添加中文字体支持 安装工具包 yum install -y fontconfig mkfontscale 安装完成后...

    shaonbean
  • SAP UI5 Web Component里如何自定义CSS style

    在public文件夹的index.html里的head标签页里,添加一个style设置:

    Jerry Wang
  • LaTeX 折腾系列 | Linux 字体安装记录

    在使用 LaTeX 进行中文字体编译排版过程中,发现 CentOS 6.5 中缺乏很大一部分中文字体,以至于在编译过程中频繁抛出缺乏字体的错误。 现在基于 wi...

    Steven Shen
  • 网页的修饰

    总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

    张俊红
  • 图片API丨网站如何接入Bing每天一更背景?

    Bing,即必应。常常有些站都是千篇一律的底色背景,毫无新意,导致的即是访客一个一个访你友链都不访那些死鬼站长!这就是Bing每天一更背景,也十分的骚,需要的上...

    V站CEO-西顾

扫码关注云+社区

领取腾讯云代金券