textarea高度自適應

一.前言

當textarea內容增多時，就會出現一個讓人討厭的滾動條，怎麼樣讓textarea高度隨內容自適應呢？

 

 二.使用H5 contenteditable 屬性代替

contenteditable 屬性規定元素內容是否可編輯。

(若是元素未設置 contenteditable 屬性，那麼元素會從其父元素繼承該屬性)

HTML:

<div contenteditable="true"></div>

CSS:

min-height: 100px; width: 200px;

優勢：簡單明瞭

缺點：1.須要過濾HTML標籤

           2.IE6瀏覽器對min/max無效

min-height: 200px; _height: 200px;

           3.placeholder和maxlength等屬性須要js設置

           4.換行的問題

              iE瀏覽器下（IE6~8），輸入文字回車的時候，div內部是會自動產生p標籤包含每行元素的，而其餘瀏覽器貌似是產生br標                籤。因爲默認的p標籤是有1em大小的上下margin值的，清除p標籤的margin值：

p{ margin: 0; }

 

三.js事件監聽動態改變textarea高度

JS:

$("textarea:first").on("input propertychange keyup change",function(){
             $(this).height(this.scrollHeight);
        })
// Add input event listeners
// * input for modern browsers
// * propertychange for IE 7 & 8
// * keyup for IE >= 9: catches keyboard-triggered undos/cuts/deletes
// * change for IE >= 9: catches mouse-triggered undos/cuts/deletions (when textarea loses focus)
// scrollHeighr返回元素的完整高度，textarea的默認border，padding要置0

基本上全部的jquery插件核心都是這段代碼，可是實際上它的效果很是坑爹

1.它響應的是keyup事件，所以也就是說確定會有延遲。

2.它也有兼容性問題，再某些瀏覽器上(好比safari)，它的scrollHeight會莫名奇妙地多出一些，看起來很是奇怪

 

四.textarea高度繼承父元素

HTML：

<div class="expandingArea ">
    <pre><span></span><br></pre>
    <textarea placeholder="輸入文字"></textarea>
</div>

其中的expandingArea的樣式僅有

.expandingArea{
    position:relative;
}

目的是用於textarea相對於expandingArea絕對定位：

textarea{
    position:absolute;
    top:0;
    left:0；
    height:100%;
}

經過這樣的樣式設置，textArea的高度會始終等於expandingArea的高度。

pre{
    display:block;
    visibility:hidden;
}

pre以塊形式存在，而且不可見，可是是佔用空間的。

這時需要把textarea中的內容實實的同時到pre裏的span標籤中，pre會隨內容的高度變化而變化，expandingArea的高度又隨pre變化，由於textarea的高度100%textarea的高度會隨expandingArea變化，

這方法來自github一位大神，附上demo連接，有具體的js實時綁定已經html標籤過濾 

http://alexdunphy.github.io/flexText/