textarea宽度、高度自动适应处理方法

时间：2023-03-08 15:11:33
textarea宽度、高度自动适应处理方法

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>

相关文章