div可编辑之contenteditable属性

最近作项目，用到可编辑文本，首先进入我脑海的就是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事件的原理我尚未时间去弄明白，但愿小伙伴们给点想法...