contenteditable跟user-modify还能这么玩🌚

2019年9月8日 110次阅读 来源: 聪明的汤姆

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

开胃

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

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

《contenteditable跟user-modify还能这么玩🌚》
乍一看，好像很普通，但是它可以解决一个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>

于是就有了以下场景：

《contenteditable跟user-modify还能这么玩🌚》

缺点

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

《contenteditable跟user-modify还能这么玩🌚》

《contenteditable跟user-modify还能这么玩🌚》

解决

网上冲浪查资料后，发现了一个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>

于是就有了以下场景：
《contenteditable跟user-modify还能这么玩🌚》

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

总结

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

往期推荐

css掩人耳目式海浪动效🌊，这可能是最简单的实现方式了吧？️

你可能不知道的css骚操作 — 表单验证🤦️

html指令式实现tooltip文字提示，纯css实现（无脚本）️

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注 💨

《contenteditable跟user-modify还能这么玩🌚》

更多精彩内容尽在微信公众号「不会写前端」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注🌘

    原文作者：聪明的汤姆
    原文地址: https://segmentfault.com/a/1190000020045449
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞