开发者社区> 落雨_> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
0 0
div 自适应高度 自动填充剩余高度
方案1: Html: 头部DIV 下部DIV CSS: html, body { height: 100%; padding: 0; margin: 0; } .
651 0
duilib 修复Text控件无法设置宽度的bug,增加自动加算宽度的属性
转载请说明原出处,谢谢~~:       今天有朋友反映CTextUI控件无法设置宽度,于是修复了这个bug,顺便给Text控件增加了一个自动计算宽度的属性,描述如下       bug出现在EstimeteSize函数,...
727 0
关于Div的宽度与高度的100%设定
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题! 其实,要弄懂div宽度|...
657 0
+关注
落雨_
http://js-dev.cn
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载