textarea高度自適應自動展開

原文參考地址： http://caibaojian.com/textarea-autoheight.html

 

使用scrollHeight方法

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