textarea自动撑开缩放

思路一

使用一个pre元素，将textarea的内容复制到pre的子元素span中，利用元素换行自动撑开包裹元素.wrap的高度。

监听事件

Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。
1.oninput
oninput 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）。
2.onpropertychange
onpropertychange 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）（仅 IE 支持）

实现

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,'
');
        expandDom.innerText = html;
      });
      var html = textarea.value.replace(/\n/g,'
');
      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，但是交互不友好，有明显的的抖动。

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