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事件的原理我尚未時間去弄明白，但願小夥伴們給點想法...