TEXTAREA高度自适应自动展开

需求

web开发中，使用textarea的场景非常常见。但是原生的textarea不能根据用户输入的内容来伸缩自己的高度，这个特性感觉很反人类，在一些特定下我们希望它的高度能随着内容自适应，而不出现滚动条。就像下面的图一样。

demo图

实现代码

• html

<textarea id="textarea">textarea>  

• js

 // textarea 自适应高度  
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);  

兼容性

这个问题目前发现在安卓机上，有时候会这个方法会不走，（我这边页面用在混合app开发上），为了解决这个问题，这边还有一个稍微次一点的方法，这边也贴出来，提供给有需要的同学

    <textarea oninput="autosize(this)">textarea>

       // 自动展开textarea
    function autosize(obj) {
        var el = obj;
        setTimeout(function() {
            el.style.cssText = 'height:auto; padding:0';
            // for box-sizing other than "content-box" use:
            // el.style.cssText = '-moz-box-sizing:content-box';
            el.style.cssText = 'height:' + el.scrollHeight + 'px';
        }, 0);
    }

使用这个方法，textarea会根据内容的增加减少而变化，但如果先输入文字然后再删除的话，textarea不会完全恢复到原来的高度。。。算是一点点的小遗憾，但是兼容性不错。

简洁的一种写法

这边还有一个最简洁的写法，但是bug也是最多的.最致命的是,可以跟随页面内容增加而调整textarea的高度，但不会随着内容的减少而减小高度。o(╯□╰)o
这边也放出代码：（不推荐）

<textarea onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'">textarea>

一些黑科技

当然了，网上的大神们，为了实现这种效果也是操碎了心，还有很多黑科技写法，诸如在div上加contenteditable="true"来假冒texta,都是可以的，按需使用即可。附上张鑫旭大神的这篇文章： div模拟textarea文本域轻松实现高度自适应