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-onlyread-writewrite-onlyread-write-plaintext-only
我们取第四个值就行，定义元素可以被编辑且只可输入纯文本，因此回车也就不会产生div?，改造后的代码如下：
<style class="textarea" style="display: block; -webkit-user-modify: read-write-plaintext-only;">
html {
background-color: #fff;
}
</style>
复制代码于是就有了以下场景：
缺点按Tab键会跳焦！所以应该需要用脚本去处理，具体网上冲浪一大堆哈 ?
作者：聪明的汤姆
链接：https://juejin.im/post/5d5003396fb9a06b265088c0
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
扫一扫
1017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
