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

简介: textarea自动高度 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

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>

 

目录
相关文章
|
5月前
div高度设置100%无效的问题
div高度设置100%无效的问题
64 1
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度 如图:   1.自动换行 111111111111111111111111 2.限制宽高度 11111111111111111111111111  (注意:如果div放在li中还需...
3701 0
|
16天前
textarea文本框根据输入内容自动适应高度
textarea文本框根据输入内容自动适应高度
12 0
|
14天前
|
前端开发 JavaScript UED
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
60 0
|
8月前
|
JavaScript
textarea 动态宽高(根据内容动态撑开宽高)
textarea 动态宽高(根据内容动态撑开宽高)
234 0
|
9月前
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
296 1
DIV浮动后父DIV高度自动失效解决方案
DIV浮动后父DIV高度自动失效解决方案
60 0
自定义的 ListBoxItem 自适应ListBox的宽度
原文:自定义的 ListBoxItem 自适应ListBox的宽度    主要是要设置HorizontalContentAlignment的值,而不是HorizontalAlignment 1 2 3 4 5 6 ...
905 0

热门文章

最新文章