textarea高度自適應自動展開

 

 在使用以前，推薦兩個比較好的事件，分別是oninput和onpropertychange，IE9如下不兼容oninput。在textarea發生變化時，能夠經過監聽這兩個事件來觸發你須要的功能。

textarea高度自適應是一個比較經常使用的前端開發效果。 在新浪微博的輸入框中也有這個效果，不過它那個效果不怎麼好看，高度展開有點延遲，多是經過給高度賦值scrollheight.而下面這個則是經過複製textarea的html並另一個元素pre,因爲設置pre自動展開，因此不會存在有滯留的感受，交互效果較好。

代碼兼容IE7及以上，IE6沒測，已放棄兼容

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