Comment adapter automatiquement la largeur et la hauteur de la zone de texte de la zone de texte-tutoriel HTML-php.cn

Comment adapter automatiquement la largeur et la hauteur de la zone de texte de la zone de texte

php中世界最好的语言

Libérer： 2018-02-09 09:51:23

original

9352 Les gens l'ont consulté

Cette fois, je vais vous montrer comment adapter automatiquement la largeur et la hauteur de la zone de texte. Quelles sont les précautions et voici le combat réel.

<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)?&#39;150px&#39;:(this.scrollHeight+5)+&#39;px&#39;);overflow:auto;"></textarea>   
    </FORM>  
    </BODY>  
    </HTML>

Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment accéder à l'adresse indiquée par href après l'événement de clic du lien hypertexte html a

Masquer un morceau de texte en HTML

Comment afficher et masquer des éléments HTML via l'affichage ou la visibilité

html Comment convertir les données du tableau au format Json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!