思路一

使用一個pre元素晋渺，將textarea的內(nèi)容復(fù)制到pre的子元素span中，利用元素?fù)Q行自動撐開包裹元素.wrap的高度葫掉。

監(jiān)聽事件

Firefox些举、Chrome、IE9俭厚，IE10 均支持 oninput 事件户魏，此外所有版本的 IE 均支持 onpropertychange 事件。
1.oninput
oninput 事件在用戶輸入、退格（backspace）叼丑、刪除（delete）关翎、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標(biāo)剪切與粘貼時觸發(fā)（在 IE9 中只在輸入鸠信、粘貼纵寝、鼠標(biāo)粘貼時觸發(fā)）。
2.onpropertychange
onpropertychange 事件在用戶輸入星立、退格（backspace）爽茴、刪除（delete）、剪切（ctrl + x）绰垂、粘貼（ctrl + v）及鼠標(biāo)剪切與粘貼時觸發(fā)（在 IE9 中只在輸入室奏、粘貼、鼠標(biāo)粘貼時觸發(fā)）（僅 IE 支持）

實現(xiàn)

<style>
    div, pre, span, textarea {
      padding: 0;
      margin: 0;
    }
    .wrap{
      position: relative;
      border: 1px solid black;
      overflow: hidden;
    }
    .wrap > pre{
      padding: 8px 12px;
    }
    #expand-area{
      white-space: pre-wrap;  /* 段落中的文本換行 */
      word-wrap: break-word; /* 長單詞換行 */
    }
    .wrap textarea{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; /* textarea 熱區(qū)充滿整個區(qū)域*/
      padding: 8px 12px;
      outline: 0;
      resize: none;
      border: none;
      overflow: hidden;
      box-sizing: border-box;
    }
  </style>

function autoExpand (wrap) {
    let expandDom = wrap.querySelector('#expand-area')
    let textarea = wrap.querySelector('#txt')
    // Firefox劲装、Chrome胧沫、IE9，IE10支持oninput占业，所有版本的 IE 支持onpropertychange
    if (textarea.addEventListener) {
        textarea.addEventListener('input', function() {
          expandDom.textContent = textarea.value;
      }, false);
      expandDom.textContent = textarea.value;
    } else if (textarea.attachEvent) {
      textarea.attachEvent('onpropertychange', function() {
        var html = textarea.value.replace(/\n/g,'<br/>');
        expandDom.innerText = html;
      });
      var html = textarea.value.replace(/\n/g,'<br/>');
      expandDom.innerText = html;
    }
    if(window.VBArray && window.addEventListener) { //IE9
      textarea.attachEvent("onkeydown", function() {
        var key = window.event.keyCode;
        if(key == 8 || key == 46) expandDom.textContent = textarea.value; // backspace绒怨、delete 兩個按鍵的 keyCode 分別為 8、46
      });
      textarea.attachEvent("oncut", function(){
        expandDom.textContent = textarea.value;
      });//處理粘貼
    }
  }
  autoExpand(document.querySelector('.wrap'))

思路二

只使用textarea并賦予textarea的高度為它的scrollHeight谦疾，但是交互不友好南蹂，有明顯的的抖動。

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

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