Jquery實現(xiàn)textarea根據(jù)文本內(nèi)容自適應高度
更新時間：2015年04月03日 10:15:02 投稿：hebedich
本文給大家分享的是Jquery實現(xiàn)textarea根據(jù)文本內(nèi)容自適應高度，這些在平時的項目中挺實用的，所以抽空封裝了一個文本框根據(jù)輸入內(nèi)容自適應高度的插件，這里推薦給小伙伴們。
在玩微博的時候我們可能會注意到一個細節(jié)就是不管是新浪微博還是騰訊微博在轉(zhuǎn)發(fā)和評論的時候給你的默認文本框的高度都不會很高，這可能是版面的限制和用戶通常只轉(zhuǎn)播或者評論一個短句有關。但是當你輸入超過一行文字的時候，文本框的高度就自動撐高了，大大改善了體驗，這樣用戶就可以看到全部的文字。不用再去拖動文本框的滾動條。
autoTextarea.js
(function($){
$.fn.autoTextarea = function(options) {
var defaults={
maxHeight: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);
demo.js
$(".doctable textarea").autoTextarea({
maxHeight:400,
minHeight:100
});
以上所述就是本文的全部內(nèi)容了，希望能夠給大家學習jQuery有所幫助。
相關文章
一樣的table？不一樣的table(可編輯狀態(tài)table)
今天要分享的table不僅僅能顯示數(shù)據(jù)，還可以對數(shù)據(jù)進行編輯，當鼠標點擊數(shù)據(jù)時相應的數(shù)據(jù)格就變成可編輯的狀態(tài)，廢話不多說，進入今天的主題2012-09-09
基于jquery實現(xiàn)的表格分頁實現(xiàn)代碼
該方法的運用是從后臺數(shù)據(jù)庫中一次性取出所有的數(shù)據(jù)，運用Jquery把一部分數(shù)據(jù)隱藏起來，事實上數(shù)據(jù)還是全部在html頁面中2011-06-06
如何為已經(jīng)綁定A事件的對象添加B事件，由B事件判斷A事件是否觸發(fā)2009-09-09
這篇文章主要介紹了jquery實現(xiàn)浮動的側(cè)欄,實例分析了基于jQuery的stickySidebar插件實現(xiàn)浮動層的相關技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了Jquery上傳插件webupload的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
jquery進行數(shù)組遍歷如何跳出當前的each循環(huán)
通過 jquery 的循環(huán)方法進行數(shù)組遍歷，但是當不符合條件時，怎么跳出當前循環(huán)，解決方法如下,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了jQuery隱藏和顯示效果實現(xiàn)的相關資料,需要的朋友可以參考下2016-04-04
使用jquery動態(tài)加載javascript以減少服務器壓力
如果您要創(chuàng)建一個web2.0的應用程序，那么你的網(wǎng)頁會包括大量的JavaScript文件，這些可能會拖慢您的網(wǎng)頁。因此，動態(tài)加載JavaScript代碼到您的網(wǎng)頁是一個好主意，即只有當實用他們的時候加載它們。這種策略可以幫助你減少你的網(wǎng)頁的加載時間2012-10-10
本篇文章主要介紹了jQuery中用on綁定事件時需注意的事項，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了jquery點擊縮略圖切換視頻播放，我們可以點擊縮略圖切換不同的視頻進行播放，過去是實現(xiàn)圖片切換現(xiàn)在有進一步實現(xiàn)視頻切換，感興趣的小伙伴可以參考下。2015-09-09