明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

怎么讓textarea文本域?qū)挾扰c高度width及height自動適應(yīng)

發(fā)表時間：2024-04-30 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)碓鯓幼宼extarea文本域?qū)挾群透叨葁idth及height自動適應(yīng)，讓textarea文本域?qū)挾群透叨葁idth及height自動適應(yīng)的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。<HTML> <HEAD> <TITLE>textare...
這次給大家?guī)碓鯓幼宼extarea文本域?qū)挾群透叨葁idth及height自動適應(yīng)，讓textarea文本域?qū)挾群透叨葁idth及height自動適應(yīng)的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

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

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

html超級鏈接a的click事件之后跳轉(zhuǎn)href所指向的地址

怎么在HTML中隱藏一段文字

如何通過display或visibility來實現(xiàn)HTML元素的顯示與隱藏

html里table表數(shù)據(jù)如何轉(zhuǎn)為Json格式

以上就是怎樣讓textarea文本域?qū)挾群透叨葁idth及height自動適應(yīng)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。