您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 文本域textarea寬度和高度width及height自動(dòng)適應(yīng)的方法實(shí)例

文本域textarea寬度和高度width及height自動(dòng)適應(yīng)的方法實(shí)例

文章來源：365jz.com 點(diǎn)擊數(shù)：1218 更新時(shí)間：2018-11-06 10:14 參與評(píng)論

文本域textarea寬度和高度width及height自動(dòng)適應(yīng)的方法實(shí)例1：

textarea文本域?qū)挾群透叨龋╳idth、height）自動(dòng)適應(yīng)變化處理

<!doctype html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)</title>    
	<style>    
	h2{    
		text-align: center;    
		margin:50px auto;    
	}    
	.test_box {    
width: 400px;    
min-height: 20px;    
max-height: 300px;    
_height: 120px;    
margin-left: auto;    
margin-right: auto;    
padding: 3px;    
outline: 0;    
border: 1px solid #a0b3d6;    
font-size: 12px;    
line-height: 24px;    
padding: 2px;    
word-wrap: break-word;    
overflow-x: hidden;    
overflow-y: auto;    
border-color: rgba(82, 168, 236, 0.8);    
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);    
}    
	</style>    
</head>    
<body>    
	<h2>div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)</h2>    
	<div class="test_box" contenteditable="true"><br /></div>    
</body>    
</html>

文本域textarea寬度和高度width及height自動(dòng)適應(yīng)的方法實(shí)例2：

<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中解決斷行問題(防止自動(dòng)變?yōu)樵谝恍酗@示，主要解決ie兼容問題，ie8中當(dāng)設(shè)寬度為100%時(shí)，文本域類容超過一行時(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文本域的高度除了設(shè)置固定高度外,不會(huì)隨著文本內(nèi)容增加而高度自適應(yīng)的問題.

解決這個(gè)問題的方法我們可以利用div模擬textarea的方式

contenteditable="true"這個(gè)屬性實(shí)現(xiàn)了div文本輸入的功能

css上給div的高度設(shè)置成auto 這樣高度就實(shí)現(xiàn)了自適應(yīng)

當(dāng)然用div模擬textarea時(shí),我們沒辦法使用placeholder的屬性.

當(dāng)然這個(gè)一度讓我煩躁的缺點(diǎn)也是有解決的辦法的.

給div添加 placeholder="xxxx" 的屬性

同時(shí)為div設(shè)置css,代碼如下

.textarea{
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 5px;
    border:1px solid #ccc;
}
.textarea:empty:before{
    content: attr(placeholder);
    color:#bbb;
    }
.textarea:focus:before{
    content:none;
    }

大功告成!