彭家二少

2020年9月06日星期日站长/

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

textarea高度自适应、高度自动增高、高度自动撑开，本文通过复制textarea的html给另外一个元素pre，由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。

技术原理

textarea高度自适应是一个比较常用的前端开发效果。 在新浪微博的输入框中也有这个效果，不过它那个效果不怎么好看，高度展开有点延迟，可能是通过给高度赋值scrollHeight.而下面这个则是通过复制textarea的html并另外一个元素pre，由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。

兼容情况

在使用之前，推荐两个比较好的事件，分别是oninput和onpropertychange，在textarea发生变化时，可以通过监听这两个事件来触发你需要的功能，看一下兼容情况：

  1. Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。  
  2.   
  3. oninput 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）。  
  4.   
  5. onpropertychange 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）（仅 IE 支持）。  
  6.   
  7. backspace、delete 两个按键的 keyCode 分别为 8、46。  
  8.   
  9. oncut 事件在粘贴（ctrl + v）、鼠标粘贴时触发。  

HTML代码：

  1. <div class="expandingArea " id="textarea">  
  2.   <pre><span></span><br></pre>  
  3.   <textarea></textarea>  
  4. </div>  

JavaScript代码：

  1. function makeExpandingArea(container) {  
  2.   var area = container.getElementsByTagName('textarea')[0] ;  
  3.   var span = container.getElementsByTagName('span')[0] ;  
  4.   if (area.addEventListener) {  
  5.     area.addEventListener('input', function() {  
  6.       span.textContent = area.value;  
  7.    }, false);  
  8.    span.textContent = area.value;  
  9.  } else if (area.attachEvent) {  
  10.   area.attachEvent('onpropertychange', function() {  
  11.     var html = area.value.replace(/\n/g,'<br/>');  
  12.     span.innerText = html;   
  13.   });  
  14.   var html = area.value.replace(/\n/g,'<br/>');  
  15.   span.innerText = html;  
  16. }  
  17. if(window.VBArray && window.addEventListener) { //IE9  
  18.   area.attachEvent("onkeydown", function() {  
  19.     var key = window.event.keyCode;  
  20.     if(key == 8 || key == 46) span.textContent = area.value;  
  21.    
  22.   });  
  23.   area.attachEvent("oncut", function(){  
  24.     span.textContent = area.value;  
  25.   });//处理粘贴  
  26. }  
  27. container.className += "active";  
  28. }  
  29.   
  30. var areas = document.getElementById('textarea') ;  
  31. makeExpandingArea(areas);  

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

使用scrollHeight方法

只需要一个textarea：

HTML代码：

  1. <textarea id="textarea"></textarea>  

JavaScript代码：

  1. function makeExpandingArea(el) {  
  2.     var timer = null;  
  3.     //由于ie8有溢出堆栈问题，故调整了这里  
  4.     var setStyle = function(el, auto) {  
  5.         if (auto) el.style.height = 'auto';  
  6.         el.style.height = el.scrollHeight + 'px';  
  7.     }  
  8.     var delayedResize = function(el) {  
  9.         if (timer) {  
  10.             clearTimeout(timer);  
  11.             timer = null;  
  12.         }  
  13.         timer = setTimeout(function() {  
  14.             setStyle(el)  
  15.         }, 200);  
  16.     }  
  17.     if (el.addEventListener) {  
  18.         el.addEventListener('input', function() {  
  19.             setStyle(el, 1);  
  20.         }, false);  
  21.         setStyle(el)  
  22.     } else if (el.attachEvent) {  
  23.         el.attachEvent('onpropertychange', function() {  
  24.             setStyle(el)  
  25.         })  
  26.         setStyle(el)  
  27.     }  
  28.     if (window.VBArray && window.addEventListener) { //IE9  
  29.         el.attachEvent("onkeydown", function() {  
  30.             var key = window.event.keyCode;  
  31.             if (key == 8 || key == 46) delayedResize(el);  
  32.   
  33.         });  
  34.         el.attachEvent("oncut", function() {  
  35.             delayedResize(el);  
  36.         }); //处理粘贴  
  37.     }  
  38. }  
  39.   
  40. var textarea = document.getElementById('textarea');  
  41. makeExpandingArea(textarea);  

The End