textarea自动高度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>textarea宽度、高度自动适应处理方法</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--/* <meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">*/-->
<!-- 控制宽度的自动适应 -->
<style type="text/css">
.comments {
width:100%;/*自动适应父布局宽度*/
overflow:auto;
word-break:break-all;/*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行属性"word-break或word-wrap"控制其断行)*/
}
.t_global {
width:100%;
}
.t_left {
width:80px;
background-color: #CCC;
}
</style>
</HEAD>
<BODY>
<table class="t_global">
<tr>
<td class="t_left">审核意见：</td>
<td>
<FORM METHOD=POST ACTION= " ">
<!-- 第一个是普通textarea -->
<textarea class="comments" rows="4" cols="10"> </textarea>
</FORM>
</td>
</tr>
<tr>
<td class="t_left">审核意见：</td>
<td>
<FORM METHOD=POST ACTION= " ">
<!-- textarea行高自动适应类容的高度2 -->
<textarea class="comments" rows=4 name=s1 cols=27 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>
</FORM>
</td>
</tr>
<tr>
<td class="t_left">审核意见：</td>
<td>
<FORM METHOD=POST ACTION= " ">
<!-- textarea行高自动适应类容的高度3 -->
<textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>
</FORM>
</td>
</tr>
</table>
<textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>
</BODY>
</HTML>
时间： 2024-10-06 01:06:52