div模擬textarea文本域輕鬆實現高度自適應

使用很簡單,一個普通的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瀏覽器):

IE6下div模擬的textarea默認 張鑫旭-鑫空間-鑫生活

 

一個簡單demoblog

 

固然了,網上的大神們,爲了實現這種效果也是操碎了心,還有不少黑科技寫法,按需使用便可。附上張鑫旭大神的這篇文章: div模擬textarea文本域輕鬆實現高度自適應get

相關文章
相關標籤/搜索