让文本框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>
示例如下:
<script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <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><br/><br/> <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> </body> </html>
让文本框textarea自动适应内容的高度:等您坐沙发呢!