使用div模擬textarea，實現文本輸入框高度自適應（附：js控制textarea實現文本輸入框高度自適應）

一、使用textarea標簽進行多行文本的輸入有很多限制，比如不能實現高度自適應，會出現難看的滾動條等問題。

　　HTML5中添加了一個新屬性contenteditable，該屬性可以讓input,textarea以外的不可編輯的標簽具備可編輯功能；

　　用法如下：

//contenteditable="true"　　當屬性值為true的時候，可編輯標簽內可以寫入標簽，對於復制的具有樣式的內容，其樣式會保留；
<div contenteditable="true">我是可編輯的富文本框</div>

//contenteditable="plaintext-only"　　當屬性值為plaintext-only時，該可編輯標簽內只能寫入純文本的數據，對於復制的具有樣式的內容，會轉換為純文本，而將樣式標簽等內容過濾掉；
<div contenteditable="plaintext-only"></div>

 

二、如果不使用該屬性，可以使用js控制textarea的高度；原理是當textarea出現滾動條時，增加其高度，使滾動條消失。

　　怎樣判斷是否出現滾動條，其方法是但元素的scrollHeight大於offsetHeight的時候，即出現了滾動條；

　　實現方法如下：

//html
<textarea id="text"></textarea>

//css
#text{
　　font-size: 20px;
　　overflow: hidden;　　//必須
}

//js
$('#text').on('input',function(){
　　if(text.scrollHeight>text.offsetHeight){
　　　　THeight += 20;　　//font-size的大小是20，因此每次給textarea的高度增加20px
　　　　$('#text').css('height',THeight);
 }
})