textarea高度自適應自動展開

兼容情況

在使用之前，推薦兩個比較好的事件，分別是oninput和onpropertychange，在textarea發生變化時，可以通過監聽這兩個事件來觸發你需要的功能，看一下兼容情況：·

1. Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。
2. oninput 事件在用戶輸入、退格（backspace）、刪除（delete）、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標剪切與粘貼時觸發（在 IE9 中只在輸入、粘貼、鼠標粘貼時觸發）。
3. onpropertychange 事件在用戶輸入、退格（backspace）、刪除（delete）、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標剪切與粘貼時觸發（在 IE9 中只在輸入、粘貼、鼠標粘貼時觸發）（僅 IE 支持）。
4. backspace、delete 兩個按鍵的 keyCode 分別為 8、46。
5. oncut 事件在粘貼（ctrl + v）、鼠標粘貼時觸發。

HTML：

<div class="expandingArea " id="textarea">
  <pre><span></span><br></pre>
  <textarea></textarea>
</div>

JS：

function makeExpandingArea(container) {
  var area = document.getElementsByTagName('textarea')[0] ;
  var span = document.getElementsByTagName('span')[0] ;
  if (area.addEventListener) {
   area.addEventListener('input', function() {
     span.textContent = area.value;
   }, false);
   span.textContent = area.value;
 } else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    var html = area.value.replace(/\n/g,'<br/>');
    span.innerText = html; 
  });
  var html = area.value.replace(/\n/g,'<br/>');
  span.innerText = html;
}
container.className += "active";
}

var areas = document.getElementById('textarea') ;
makeExpandingArea(areas);


原文鏈接：http://caibaojian.com/textarea-autoheight.html