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(/
/g,'<br/>');
    span.innerText = html; 
  });
  var html = area.value.replace(/
/g,'<br/>');
  span.innerText = html;
}
container.className += "active";
}

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


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