使用很簡單,一個普通的block元素上加個contenteditable="true"
就ok了,以下:html
<div contenteditable="true"></div>
true
外面的引號甚至去掉都不要緊。瀏覽器
contenteditable
屬性雖是HTML5裏面的內容,可是IE彷佛老早就支持此標籤屬性了。因此,兼容性方面仍是不用太擔憂的。wordpress
ok,最麻煩的模擬textarea的可編輯效果已經解決了,如今想要使用<div>
實現高度自適應那就像是給花花草草鬆鬆土同樣容易的。使用min-height
屬性基本上就一步到位了,考慮到IE6瀏覽器對min
/max
家族不屑一顧,結合其內部元素溢出會撐開父標籤高寬的特性,IE6瀏覽器直接定高就能夠了。因而,假設咱們要實現默認200像素高度,高度可隨內容自適應的效果,直接下面兩個樣式就能夠了:測試
{ min-height: 200px; _height: 200px; }
因而,把說到如今的內容結合一塊兒,就可使用div模擬textarea文本域輕鬆實現高度自適應了。spa
固然,也是能夠設置垂直方向和水平方向的滾動條3d
{ overflow-x: hidden; //水平方向禁止滾動 overflow-y: auto; //垂直方向能夠滾動 }
以下測試代碼——
CSS代碼:code
.test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; _overflow-y: visible; }
HTML代碼:htm
<div class="test_box" contenteditable="true"></div>
結果以下圖(所有截自IE6瀏覽器):
一個簡單demoblog
固然了,網上的大神們,爲了實現這種效果也是操碎了心,還有不少黑科技寫法,按需使用便可。附上張鑫旭大神的這篇文章: div模擬textarea文本域輕鬆實現高度自適應get