div可编辑之contenteditable属性

2019独角兽企业重金招聘Python工程师标准>>>

最近做项目，用到可编辑文本，首先进入我脑海的就是textarea富文本编辑框，就如我所想的那样，我也去做了，顺利做完提交，等到展示的时候发现textarea并不会随着内容的高度增加而增加，这让我百思不得解，为什么div就可以，对，div这个标签就这样闯入了我的印象，如果div可编辑就好了。后来搜索了一下，发现有个属性contenteditable可以让div呈现可编辑状态，欣喜若狂的我决定把textarea标签替换为div标签，替换完后，完美的展示了我想要的结果。下面来介绍下contenteditable

contenteditable

1.定义和用法

contenteditable 规定是否可编辑元素的内容，是html5的新属性，不过支持ie8

语法：

<element contenteditable="value">

属性值：

true：规定可编辑的文本框

false：规定不可编辑的文本框

classname：继承父元素的contenteditable属性

下面给出使用textarea的显示和使用contenteditable属性的显示

例子：以一首大家都很熟悉的诗作为显示

textarea下的显示

contenteditable="true"下的显示

虽然多行显示出来了，但我还要实现实时监听事件，让div标签使用contenteditable属性，虽然可编辑了，但因为不是input可编辑标签，所以没办法用input propertychange实时监听事件，后来我找到了DOMCharacterDataModified事件来代替input的实时监听事件，至于DOMCharacterDataModified事件的原理我还没有时间去弄明白，希望小伙伴们给点想法...

 

转载于:https://my.oschina.net/u/3680343/blog/1588024