HTML让文本框textarea自动适应内容的高度

2016-05-19 10:11:47 HTML让文本框textarea自动适应内容的高度

HTML让文本框textarea自动适应内容的高度方法如下：

textarea标签内使用JS与CSS实现方法一：

<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>

textarea自适应内容高度JS+CSS方法二：

<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> 
 
<!DOCTYPE html> 
<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>