实现textarea标签高度随内容自动变化

默认情况，textarea标签的高度是不会随文本内容自动撑开的，即其高度固定，高度过多时会使textarea标签出现滚动条；但是有时候会有需求：实现textarea标签高度随内容自动变化，那么可以利用scrollHeight属性实现，如下：

// html部分
<textarea id="textarea"></textarea>

// js部分
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);

除此之外，还有其他方法，个人认为上面这个是最好的，其它就不列出啦~