怎么讓textarea文本域?qū)挾扰c高度width及height自動(dòng)適應(yīng)
發(fā)表時(shí)間：2024-04-30 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)怎樣讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)，讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。<HTML> <HEAD> <TITLE>textare...
這次給大家?guī)?lái)怎樣讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)，讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(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í)，文本域類(lèi)容超過(guò)一行時(shí)，
當(dāng)我們雙擊文本內(nèi)容就會(huì)自動(dòng)變?yōu)橐恍酗@示，所以只能用ie的專(zhuān)有斷行
屬性
“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)類(lèi)容的高度 -->
<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)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
html超級(jí)鏈接a的click事件之后跳轉(zhuǎn)href所指向的地址
怎么在HTML中隱藏一段文字
如何通過(guò)display或visibility來(lái)實(shí)現(xiàn)HTML元素的顯示與隱藏
html里table表數(shù)據(jù)如何轉(zhuǎn)為Json格式
以上就是怎樣讓textarea文本域?qū)挾群透叨葁idth及height自動(dòng)適應(yīng)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
