textarea高度自适应，随着内容增加高度增加

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/textarea-autoheight.html
来源:http://caibaojian.com

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

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

兼容情况
在使用之前，推荐两个比较好的事件，分别是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）、鼠标粘贴时触发。
演示代码
CSS

 <style type="text/css">
    textarea, 
    pre {
      margin: 0;
      padding: 0;
      outline: 0;
      border: 0;
    }
    .expandingArea {
      position: relative;
      border: 1px solid #888;
      background: #fff;
    }
    .expandingArea textarea,
    .expandingArea  pre {
      padding: 5px;
      background: transparent;
      font: 400 13px/16px helvetica, arial, sans-serif;
      /* Make the text soft-wrap */
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .expandingArea  textarea {
      /* The border-box box model is used to allow
       * padding whilst still keeping the overall width
       * at exactly that of the containing element.
       */
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       -ms-box-sizing: border-box;
       box-sizing: border-box;
       width: 100%;
       /* This height is used when JS is disabled */
       height: 100px;
     }
     .expandingArea.active  textarea {
      /* Hide any scrollbars */
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      /* Remove WebKit user-resize widget */
      resize: none;
    }
    .expandingArea  pre {
      display: none;
    }
    .expandingArea.active  pre {
      display: block;
      /* Hide the text; just using it for sizing */
      visibility: hidden;
    }

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);

演示地址
参考链接1、链接2、监听文本框输入
当然如果你不追求用户体验的话，则可以只使用textarea，并加入一个简单的代码就能够搞定。可以使用上面同样的两个事件来监听其触发textarea的动作，并赋予textarea的高度为它的scrollHeight。

使用scrollHeight方法
只需要一个textarea：（20170107补充）

HTML代码：

<textarea id="textarea"></textarea>

JavaScript代码：

function makeExpandingArea(el) {
    var setStyle = function(el) {
        el.style.height = 'auto';
        el.style.height = el.scrollHeight + 'px';
        // console.log(el.scrollHeight);
    }
    var delayedResize = function(el) {
        window.setTimeout(function() {
            setStyle(el)
        },
        0);
    }
    if (el.addEventListener) {
        el.addEventListener('input',function() {
            setStyle(el)
        },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);
        }); //处理粘贴
    }
}
makeExpandingArea(textarea);

演示地址

其他地方看到的方法

$(function(){
        $.fn.autoHeight = function(){    
        function autoHeight(elem){
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function(){
            autoHeight(this);
            $(this).on('keyup', function(){
                autoHeight(this);
            });
        });     
    }                
    $('textarea[autoHeight]').autoHeight();    
})

页面中的textarea直接加属性就行

<textarea  autoHeight="true" readonly="readonly" > </textarea>

pc 移动端都经过测试，没问题 放心用吧！

然而这个on属性要jQuery1.8以后的版本才支持

textarea显示全部内容支持高度自适应
这个写法未验证，但同样有on属性

function readyNumber() { 

  $('textarea').each(function () {
     this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
  }).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
  })
}

readyNumber()