1. 程式人生 > >將div變成可編輯的狀態,你造麽?QQ空間中的發表說說的文本框其實就是一個DIV,而非textarea文本框

將div變成可編輯的狀態,你造麽?QQ空間中的發表說說的文本框其實就是一個DIV,而非textarea文本框

add ack 之前 便是 back dde 提交表單 提交 qq空間

<div contenteditable="true">可以編輯裏面的內容</div>

如果你在BODY裏面加上contenteditable="true",可以發現該屬性是多麽的神奇。因此我們可以給HTML標簽設置contenteditable="true"屬性則可以對該標簽進行編輯。

contenteditable屬性兼容所有瀏覽器(IE6之前的版本是否兼容未測試)

在有些時候我們完全可以用DIV去替代input或者textarea來達到同樣的效果,例如,在使用ajax的時候,在提交表單時我們可以獲取DIV的內容。

細心的人會發現,QQ空間中的發表說說的文本框其實就是一個DIV,而非textarea文本框。

Div+CSS如何模擬textarea文本域高度自適應以達到html5標準的contenteditable屬性

主要通過為標簽添加HTML5中的contenteditable屬性達到此效果(contenteditable:規定是否允許用戶編輯內容),很棒的是,此屬性IE也會支持,所以不用再為兼容問題太去糾結了。

Html中的contentEditable屬性可以打開某些元素的可編輯狀態。也許你沒用過contentEditable屬性,甚至從未聽說過,contentEditable的作用相當神奇。可以讓div或整個網頁,以及span等等元素設置為可寫.我們最常用的輸入文本內容便是input與textarea 使用contentEditable屬性後,可以在div,table,p,span,body,等等很多元素中輸入內容.特別是contentEditable已在html5標準中得到有效的支持。大家來見證一下吧。

設置contentEditable=”true”屬性後,是不是相當的神奇。哈哈…

將div變成可編輯的狀態,你造麽?QQ空間中的發表說說的文本框其實就是一個DIV,而非textarea文本框