textarea高度隨文本內容變化，且不出現滾動條

一般文本域的寫法以下

<textarea type="text" class="form-control pull-left" id="description" name="description"></textarea>

在頁面的顯示效果以下

通常會有一個初始高度，當不對該文本域進行處理，文本域的高度不會發生變化，當文本域內的內容過多時，將會出現滾動條，效果以下

效果不美觀。

如今想讓文本域的高度隨內容的多少而發生改變，且不會產生滾動條。

能夠使用如下代碼

$('textarea').each(function () {
        this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
    }).on('input', function () {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });

顯示效果以下

該文本域的高度會隨着內容的增多而變大，也會隨着內容的減小而減少。實時變化。

 

有時候狀況會比較複雜，例如我在作一個項目，前臺使用的是bootstrap，使用model模態框彈出一個頁面，在頁面上有一個文本域，保持本來的代碼保持不變，效果就發生了變化。

我猜測這種效果的出現多是由於彈出框的高度和寬度問題。

後來改了一下代碼，首先給文本域一個默認高度

<textarea type="text" class="form-control pull-left" id="description" name="description" style="height: 50px"></textarea>

文本域獲得焦點後，再實時監控文本域裏的內容，而後讓高度隨之變化。

$("#description").focus(function () {
        $('textarea').each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
        }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
    });