這些在平時的項目中挺實用的,因此抽空封裝了一個文本框根據輸入內容自適應高度的插件-autoTextarea:css
02 |
$.fn.autoTextarea = function (options) { |
04 |
maxHeight: null , //文本框是否自動撐高,默認:null,不自動撐高;若是自動撐高必須輸入數值,該值做爲文本框自動撐高的最大高度 |
05 |
minHeight:$( this ).height() //默認最小高度,也就是文本框最初的高度,當內容高度小於這個高度的時候,文本以這個高度顯示 |
07 |
var opts = $.extend({},defaults,options); |
08 |
return $( this ).each( function () { |
09 |
$( this ).bind( "paste cut keydown keyup focus blur" , function (){ |
10 |
var height,style= this .style; |
11 |
this .style.height = opts.minHeight + 'px' ; |
12 |
if ( this .scrollHeight > opts.minHeight) { |
13 |
if (opts.maxHeight && this .scrollHeight > opts.maxHeight) { |
14 |
height = opts.maxHeight; |
15 |
style.overflowY = 'scroll' ; |
17 |
height = this .scrollHeight; |
18 |
style.overflowY = 'hidden' ; |
20 |
style.height = height + 'px' ; |
調用:this
1 |
$( ".chackTextarea-area" ).autoTextarea({maxHeight:220}); |
查看demo:http://www.css88.com/demo/autoTextarea/插件