怎样让textarea文本域宽度和高度width及height自动适应

来源：趣吃美食网

这次给大家带来怎样让textarea文本域宽度和高度width及height自动适应，让textarea文本域宽度和高度width及height自动适应的注意事项有哪些，下面就是实战案例，一起来看一下。

<HTML> 
 <HEAD> 
 <TITLE>textarea宽度、高度自动适应处理方法</TITLE> 
 <!-- 控制宽度的自动适应 --> 
 <style type="text/css"> 
 .comments { 
 width:100%;/*自动适应父布局宽度*/ 
overflow
:auto; 
 
word-break
:break-all; 
 /*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时， 
 当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行
属性
“word-break或
word-wrap
”控制其断行)*/ 
 } 
 </style> 
 </HEAD> 
 <BODY> 
 <FORM METHOD=POST 
ACTION
= " "> 
 <!-- 主要控制高度的自动适应 --> 
 <!-- 第一个是普通textarea --> 
 <textarea class="comments" rows="10" cols="10"> </textarea> 
 <!-- 以下两种方式都可以解决textarea行高自动适应类容的高度 --> 
 <textarea class="comments" rows=1 name=s1 cols=27 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea> 
 <textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea> 
 </FORM> 
 </BODY> 
 </HTML>

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

怎样让textarea文本域宽度和高度width及height自动适应