zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Restful接口传入多参数
    map转换成JSON的3种方式
    项目打包后执行start.sh提示“no such file or directory”解决办法,linux中给文件增加权限
    如何将一个a表a1字段与b表b1字段的笛卡尔积插入到e表中
    get、set方法的取代注释之lombok插件
    推荐 33 个 IDEA 最牛配置转(Java技术栈)
    mysql-----group by 对多个字段进行分组
    mysql获取某段时间内每一天的统计数据
    发票流水号生成方式
    postman之post请求传参
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416372.html
Copyright © 2011-2022 走看看