textarea自动高度调整

By | 2012 年 10 月 17 日

textarea自动高度调整

让textarea根据文本的长度自动调整它的大小。

方法一:

<textarea rows=1 cols=40 style='overflow:scroll;overflow-y:hidden;;overflow-x:hidden'
onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);"></textarea>

方法二:

<script>
var agt = navigator.userAgent.toLowerCase();
var is_op = (agt.indexOf("opera") != -1);
var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_op;
function ResizeTextarea(a,row){
if(!a){return}
if(!row)
row=5;
var b=a.value.split("\n");
var c=is_ie?1:0;
c+=b.length;
var d=a.cols;
if(d<=20){d=40}
for(var e=0;e<b.length;e++){
if(b[e].length>=d){
c+=Math.ceil(b[e].length/d)
}
}
c=Math.max(c,row);
if(c!=a.rows){
a.rows=c;
}
}
</script>
<textarea style="overflow: hidden;  font-family: Verdana,Arial; font-style: normal;  font-size: 13px; line-height: normal; " rows="4" cols="30" onfocus="javascript:ResizeTextarea(this,4);" onclick="javascript:ResizeTextarea(this,4);" onkeyup="javascript:ResizeTextarea(this,4);"></textarea>

方法三:

$("textarea").on('input',function(){
var hie=$(this)[0].scrollHeight;
$(this).css({
"height": hie + "px"
})

});
$("textarea").each(function(){
var _this = this;
if(this.attachEvent){
this.attachEvent('onpropertychange',function(e){
if(e.propertyName!='value')return;
$(_this).trigger('input');
});
}
});

发表回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据