Jquery實現 TextArea 文本框根據輸入內容自動適應高度

原文 Jquery實現 TextArea 文本框根據輸入內容自動適應高度

在玩微博的時候咱們可能會注意到一個細節就是無論是新浪微博仍是騰訊微博在轉發和評論的時候給你的默認文本框的高度都不會很高，這多是版面的限制和用戶一般只轉播或者評論一個短句有關。可是當你輸入超過一行文字的時候，TextArea自動適應高度，大大改善了體驗，這樣用戶就能夠看到所有的文字。不用再去拖動文本框的滾動條。

 

以下圖：

 

這些在平時的項目中挺實用的，因此抽空封裝了一個文本框根據輸入內容自適應高度的插件 - TextArea。

 

咱們來看看代碼：

jquery代碼：

(function($){

$.fn.autoTextarea = function(options) {

var defaults={

maxHeight:null,//文本框是否自動撐高，默認：null，不自動撐高；若是自動撐高必須輸入數值，該值做爲文本框自動撐高的最大高度

minHeight:$(this).height() //默認最小高度，也就是文本框最初的高度，當內容高度小於這個高度的時候，文本以這個高度顯示

};

var opts = $.extend({},defaults,options);

return $(this).each(function() {

$(this).bind("paste cut keydown keyup focus blur",function(){

var height,style=this.style;

this.style.height =  opts.minHeight + 'px';

if (this.scrollHeight > opts.minHeight) {

if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {

height = opts.maxHeight;

style.overflowY = 'scroll';

} else {

height = this.scrollHeight;

style.overflowY = 'hidden';

}

style.height = height  + 'px';

}

});

});

};

})(jQuery);

 

調用代碼：

$(".chackTextarea-area").autoTextarea({
        maxHeight:220,//文本框是否自動撐高，默認：null，不自動撐高；若是自動撐高必須輸入數值，該值做爲文本框自動撐高的最大高度
    })

DEMO頁面：http://www.yuzi.me/Demo/autoTextArea.html