textarea隨輸入文本增長，其高度自動加大

首先給出答案：

<textarea style="resize:none;overflow-y:hidden; min-height:80px;" onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>

解釋：

若是隻是一個textarea元素，當咱們寫入內容超過其高度時，默認會出現滾動條。如圖：

因此，咱們就是讓其不出現滾動條，而後動態改變textarea的高度。

因此，咱們首先設置其樣式：

textarea{
overflow-y:hidden;
}

設置完，再次輸入，發現和咱們一般的hidden效果不同：咱們能夠無限輸入，超出部分經過鍵盤↑↓鍵仍然能夠查看，並無隱藏，只是不出現滾動條了。

同理，你設置height和width，也只是textarea的初始可視化寬高，而不能限制它內容的增長。

注：textarea元素有本身設置寬高的方法，就是cols和rows屬性。這倆屬性和用CSS設置其寬高有必定關係，你們能夠按照本身習慣使用，我就習慣使用height和width設置。

沒有滾動條，就成功一半了。下面就是當內容超出可視區時，增長可視區的高度。這裏問題來了，textarea可視區的高度是什麼呢？

你們能夠試一下：

<script>
$('textarea').height();
$('textarea').innerHeight();
$('textarea').outerHeight(true);
</script>

這幾個值都是不變的。無論咱們是否設置了初始高度，其值都不會改變。那怎麼獲取咱們輸入內容所佔的高度呢，這個高度就是scrollHeight。

這個是JS元素對象的一個屬性，在JQ中並無封裝該屬性。若是想要在JQ中使用該屬性，只能將JQ對象轉換成DOM對象才行：

$('textarea')[0].scrollHeight;

實際上，咱們用得較可能是scrollTop和scrollLeft屬性，表示被捲過去的頭部和左側距離。這個屬性也是scroll，這裏用在獲取textarea輸入內容的高度再適合不過（內容超出可視區，不至關於捲起來了嗎）。因此咱們能夠這樣動態改變textarea的高度：

$('textarea').height($('textarea')[0].scrollHeight)

這條語句的意思是：textarea的高度，便可視化高度的值，等於輸入內容的高度。這樣，textarea就會始終包圍着文本。

剩下的就是添加事件了。咱們確定會想到keyup事件。當咱們每次輸入一個數據時，觸發keyup事件，而後改變textarea高度。可是，使用keyup事件有一個問題：必須有按鍵按下才能觸發事件。這有什麼問題嗎？你們想一想，textarea裏的值必定得敲寫嗎？若是我直接複製內容呢。咱們使用Ctrl + C/V複製黏貼時，因爲也按下了按鍵，因此仍然能觸發事件keyup，但若是是經過鼠標右鍵複製粘貼則不能觸發keyup。這就是問題。

因此，有一個更好的事件替換keyup：input事件。該事件是一旦檢測有輸入，就觸發事件，無論你是右鍵複製仍是按下鍵盤。

然而，input事件不支持IE 9如下（IE 9支持）。而IE也有一個本身的屬性，propertychange，所以考慮兼容性：

<script>
$('textarea').on('input propertychange',function(){
    $(this).height(this.scrollHieght);
})
</script>

注意：IE 9 如下支持的JQ版本就不一樣了，須要選擇適合的JQ版本才能正確兼容。

補充事件屬性知識：不少人可能以爲，我怎麼沒見過JQ手冊裏油input和propertychange事件啊？手冊裏確實沒有，緣由應該是由於有些不多用的事件就沒寫，只是將經常使用的事件寫在手冊上了，可是你們放心用，都是能用的。

實際上，HTML元素的屬性分爲普通屬性和事件屬性。好比form元素，它有name屬性，還有事件屬性onsubmit，表示提交時觸發；全部HTML的事件屬性（以on開頭的屬性）都有對應的JQ事件（只須要去掉on便可）

HTML事件屬性   JQ事件

onclick              click

onsubmit          submit

onchange         change

onkeyup           keyup

等等，這裏上一個連接，顯示HTML的事件屬性（包括但不全）

http://www.runoob.com/tags/ref-eventattributes.html

總結：

①textarea的寬高設置，是指初始可視化高度

②scrollHeight以及在JQ中調用該屬性的使用

③input和propertychange事件替換keyup事件

④事件屬性