如何讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)

發(fā)布時(shí)間：2020-09-29 17:14:27 來(lái)源：億速云閱讀：390 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)如何讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

<HTML>  
    <HEAD>  
    <TITLE>textarea寬度、高度自動(dòng)適應(yīng)處理方法</TITLE>  
    <!-- 控制寬度的自動(dòng)適應(yīng) -->  
    <style type="text/css">  
    .comments {  
     width:100%;/*自動(dòng)適應(yīng)父布局寬度*/  
overflow
:auto;  
     
word-break
:break-all;  
    /*在ie中解決斷行問(wèn)題(防止自動(dòng)變?yōu)樵谝恍酗@示，主要解決ie兼容問(wèn)題，ie8中當(dāng)設(shè)寬度為100%時(shí)，文本域類容超過(guò)一行時(shí)，  
    當(dāng)我們雙擊文本內(nèi)容就會(huì)自動(dòng)變?yōu)橐恍酗@示，所以只能用ie的專有斷行
屬性
“word-break或
word-wrap
”控制其斷行)*/  
    }  
    </style>  
    </HEAD>  
    <BODY>  
    <FORM   METHOD=POST   
ACTION
= " ">  
    <!-- 主要控制高度的自動(dòng)適應(yīng) -->  
    <!-- 第一個(gè)是普通textarea -->  
    <textarea class="comments" rows="10" cols="10"> </textarea>  
    <!-- 以下兩種方式都可以解決textarea行高自動(dòng)適應(yīng)類容的高度 -->  
    <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>

感謝各位的閱讀！關(guān)于如何讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

如何讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽