contenteditable是html的一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在许多不足跟问题,比如没有change钩子等,本文不作深入探讨❌
01
开胃
使一个div可以进行内容编辑:
<div contenteditable>点击我进行编辑</div>
乍一看,好像很普通,但是它可以解决一个textarea的一个痛点,那就是可以自适应高度,textarea可不行 ❕
正菜
假如... 把该属性加在style元素上呢?,是不是就可以在页面上直接编写样式并且自带"热更新"?因此有如下代码:
<head>
<style contenteditable>
html {
background-color: #f1f1f1;
}
</style>
</head>
然后激动的切到页面上看效果,发现空空如也:
经过一番研究,想要在页面上编辑style元素,必须要满足以下两点:
于是代码变成了这样:
<body>
<style contenteditable>
html {
background-color: #fff;
}
</style>
</body>
于是就有了以下场景:
缺点
存在的缺点很明显,我也很刻意的去避开,那就是代码无法换行,因为回车后,内容会新增div元素,破坏了原有的文本结构:
解决
网上冲浪查资料后,发现了一个css属性 - user-modify,可取值为以下四个:
我们取第四个值就行,定义内容只可输入纯文本,因此回车也就不会产生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键会跳焦(失去焦点)!所以应该需要用脚本去处理,具体网上冲浪一大堆哈 ?