textarea高度自适应，textarea高度自动增高，textarea高度自动撑开，本文通过复制textarea的html给另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。
技术原理
textarea高度自适应是一个比较常用的前端开发效果。 在新浪微博的输入框中也有这个效果，不过它那个效果不怎么好看，高度展开有点延迟，可能是通过给高度赋值scrollHeight.而下面这个则是通过复制textarea的html并另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。
兼容情况
在使用之前，推荐两个比较好的事件，分别是oninput和onpropertychange，在textarea发生变化时，可以通过监听这两个事件来触发你需要的功能，看一下兼容情况：
- Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。
- oninput 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）。
- onpropertychange 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）（仅 IE 支持）。
- backspace、delete 两个按键的 keyCode 分别为 8、46。
- oncut 事件在粘贴（ctrl + v）、鼠标粘贴时触发。
演示代码
HTML代码：
<div class="expandingArea " id="textarea"> <pre><span></span><br></pre> <textarea></textarea> </div>
JS：（更新于2016.10.13）
function makeExpandingArea(container) { var area = container.getElementsByTagName('textarea')[0] ; var span = container.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; } if(window.VBArray && window.addEventListener) { //IE9 area.attachEvent("onkeydown", function() { var key = window.event.keyCode; if(key == 8 || key == 46) span.textContent = area.value; }); area.attachEvent("oncut", function(){ span.textContent = area.value; });//处理粘贴 } container.className += "active"; } var areas = document.getElementById('textarea') ; makeExpandingArea(areas);
当然如果你不追求用户体验的话，则可以只使用textarea，并加入一个简单的代码就能够搞定。可以使用上面同样的两个事件来监听其触发textarea的动作，并赋予textarea的高度为它的scrollHeight。
使用scrollHeight方法
只需要一个textarea：（20170107补充）
HTML代码：
<textarea id="textarea"></textarea>
JavaScript代码：(2019.3.30更新：修复ie8 bug)
function makeExpandingArea(el) { var timer = null; //由于ie8有溢出堆栈问题，故调整了这里 var setStyle = function(el, auto) { if (auto) el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; } var delayedResize = function(el) { if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function() { setStyle(el) }, 200); } if (el.addEventListener) { el.addEventListener('input', function() { setStyle(el, 1); }, false); setStyle(el) } else if (el.attachEvent) { el.attachEvent('onpropertychange', function() { setStyle(el) }) setStyle(el) } if (window.VBArray && window.addEventListener) { //IE9 el.attachEvent("onkeydown", function() { var key = window.event.keyCode; if (key == 8 || key == 46) delayedResize(el); }); el.attachEvent("oncut", function() { delayedResize(el); }); //处理粘贴 } } var textarea = document.getElementById('textarea'); makeExpandingArea(textarea);
