如何让textarea文本域宽度和高度width及height自动适应

发布时间:2020-09-29 17:14:27 作者:小新
来源:亿速云 阅读:390

这篇文章给大家分享的是有关如何让textarea文本域宽度和高度width及height自动适应的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

<HTML>  
    <HEAD>  
    <TITLE>textarea宽度、高度自动适应处理方法</TITLE>  
    <!-- 控制宽度的自动适应 -->  
    <style type="text/css">  
    .comments {  
     width:100%;/*自动适应父布局宽度*/  
overflow
:auto;  
     
word-break
:break-all;  
    /*在ie中解决断行问题(防止自动变为在一行显示,主要解决ie兼容问题,ie8中当设宽度为100%时,文本域类容超过一行时,  
    当我们双击文本内容就会自动变为一行显示,所以只能用ie的专有断行
属性
“word-break或
word-wrap
”控制其断行)*/  
    }  
    </style>  
    </HEAD>  
    <BODY>  
    <FORM   METHOD=POST   
ACTION
= " ">  
    <!-- 主要控制高度的自动适应 -->  
    <!-- 第一个是普通textarea -->  
    <textarea class="comments" rows="10" cols="10"> </textarea>  
    <!-- 以下两种方式都可以解决textarea行高自动适应类容的高度 -->  
    <textarea class="comments" rows=1   name=s1   cols=27   onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>  
    <textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>   
    </FORM>  
    </BODY>  
    </HTML>

感谢各位的阅读!关于如何让textarea文本域宽度和高度width及height自动适应就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 使用React怎么根据宽度自适应高度
  2. div模拟textarea文本域如何实现高度自适应

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

textarea he

上一篇:没有php5apache2_4.dll的解决方法

下一篇:form上传文件后如何提示保存action

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》