textarea高度自适应自动增高撑开

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

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代码：

JS：（更新于2016.10.13）

//code from http://caibaojian.com/textarea-autoheight.htmlfunctionmakeExpandingArea(container) {vararea=container.getElementsByTagName('textarea')[0] ;varspan=container.getElementsByTagName('span')[0] ;if(area.addEventListener) {area.addEventListener('input',function() {span.textContent=area.value;  },false);span.textContent=area.value; }elseif(area.attachEvent) {area.attachEvent('onpropertychange',function() {varhtml=area.value.replace(/\n/g,'
');span.innerText=html;  });varhtml=area.value.replace(/\n/g,'
');span.innerText=html;}if(window.VBArray&&window.addEventListener) {//IE9area.attachEvent("onkeydown",function() {varkey=window.event.keyCode;if(key==8||key==46)span.textContent=area.value;  });area.attachEvent("oncut",function(){span.textContent=area.value;  });//处理粘贴}container.className+="active";}varareas=document.getElementById('textarea') ;makeExpandingArea(areas);

演示地址

参考链接1、链接2、监听文本框输入

当然如果你不追求用户体验的话，则可以只使用textarea，并加入一个简单的代码就能够搞定。可以使用上面同样的两个事件来监听其触发textarea的动作，并赋予textarea的高度为它的scrollHeight。

使用scrollHeight方法

只需要一个textarea：（20170107补充）

HTML代码：

JavaScript代码：(2019.3.30更新：修复ie8 bug)

functionmakeExpandingArea(el) {vartimer=null;//由于ie8有溢出堆栈问题，故调整了这里varsetStyle=function(el,auto) {if(auto)el.style.height='auto';el.style.height=el.scrollHeight+'px'; }vardelayedResize=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) }elseif(el.attachEvent) {el.attachEvent('onpropertychange',function() {setStyle(el) })setStyle(el) }if(window.VBArray&&window.addEventListener) {//IE9el.attachEvent("onkeydown",function() {varkey=window.event.keyCode;if(key==8||key==46)delayedResize(el); });el.attachEvent("oncut",function() {delayedResize(el); });//处理粘贴}}vartextarea=document.getElementById('textarea');makeExpandingArea(textarea);