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

如何讓textarea文本域寬度與高度width及height自動適應

發(fā)表時間：2023-09-16 來源：明輝站整理相關軟件相關文章人氣：

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

<HTML>  
    <HEAD>  
    <TITLE>textarea寬度、高度自動適應處理方法</TITLE>  
    <!-- 控制寬度的自動適應 -->  
    <style type="text/css">  
    .comments {  
     width:100%;/*自動適應父布局寬度*/  
overflow
:auto;  
     
word-break
:break-all;  
    /*在ie中解決斷行問題(防止自動變?yōu)樵谝恍酗@示，主要解決ie兼容問題，ie8中當設寬度為100%時，文本域類容超過一行時，  
    當我們雙擊文本內容就會自動變?yōu)橐恍酗@示，所以只能用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>

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

相關閱讀：

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

怎么在HTML中隱藏一段文字

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

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

以上就是怎樣讓textarea文本域寬度和高度width及height自動適應的詳細內容，更多請關注php中文網(wǎng)其它相關文章！


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