div contenteditable 换行_contenteditable跟style标签可真是天生一对

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

开胃

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

contenteditable>点击我进行编辑

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

正菜

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

> html { background-color: #f1f1f1; }

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

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

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

于是代码变成了这样：

> html { background-color: #fff; } body>

于是就有了以下场景：

缺点

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

解决

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

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

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

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

改造后的代码如下：

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

于是就有了以下场景：

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

总结

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

往期推荐

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

07最后本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得在右下角点个在看跟关注?微信公众号「不会写前端」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注 ?

div contenteditable 换行_contenteditable跟style标签可真是天生一对相关推荐

python爬取疫情信息html.xpath p标签_python xpath 如何过滤div中的script和style标签
爬取一个页面中的div,想获取div中的文字,我是这么写的: selector.xpath('//div[@class="text-con"]').xpath('string(.) ...
控制两个div不换行
控制两个div不换行 <html> <head> <style type="text/css"> #row1 { float: left; wi ...
vue 在style标签中引入js变量控制样式
START 如果希望元素的样式根据js代码去控制,常见的办法呢,是在元素的style属性绑定变量即可例如 <h3 :style="{ color: colorList[0] }&qu ...
如何让多个div不换行
前几天做项目遇到一个小问题,如何让多个div不换行. 现在把解决的办法记录下来(通过white-space解决的) 请看下面这段代码 <!doctype html> <html la ...
.vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景问题由 ...
深入了解style标签元素
<style>标签元素是一种"metadata"(元数据),它的主要作用是为文档中的元素提供样式.我们通过使用这个标签在HMTL文档中嵌入样式,而不是通过它来引用外部样 ...
style标签上的scoped属性
vue中在vue文件中的style标签上有一个特殊的属性:scoped(布尔值): <style scoped> </style> 作用该属性的作用是将当前标签下的样式私有 ...
style 标签属性 scoped 的作用和原理
在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性,对于这个 scoped 属性的了解做一下介绍. 1.作用当 style 标签里面有 scoped 属性时,它的css只 ...
html 换行字体,div字体换行
div里面文字不自动换行谁能告诉我,我照着视频教学写的,为什么视频里面在#div1中加入以下代码 word-wrap:break-word;允许长单词换行到下一行: div 字体换行高度怎么控制 ...

div contenteditable 换行_contenteditable跟style标签可真是天生一对

div contenteditable 换行_contenteditable跟style标签可真是天生一对相关推荐

最新文章

热门文章