/*
 * IE6,7,8使用onpropertychange就能实现自适应;
 * FF,Chrom,opera,让textarea恢复原高度让他获取ScrollHeight的正确高度;
 * IE9,退格键oninput,onpropertychange都触发不了回调函数,所以绑定个onkeyup;
 */
<style type="text/css">
.box{padding-top:50px;text-align:center;margin-bottom:20px;}
.main{width:200px;height:48px;border:1px solid #CCC;resize:none;font:12px/16px Arial;color:#CCC;overflow:hidden;}
</style>
<div class="box">
 <textarea class="main" id="main"></textarea>
</div>
<script type="text/javascript">
/*----外置函数star----*/
var ie = !!window.attachEvent && !window.opera;
var ie9 = ie && (!!+"\v1");
var inputhandler = function(node,fun){
    if("oninput" in node){
        node.oninput = fun;
        }else{
        node.onpropertychange = fun;
        }
    if(ie9) node.onkeyup = fun;
    }
/*----外置函数end---*/
var main = document.getElementById("main");
inputhandler(main,function(){
        if(!ie) main.style.height = 48+"px";
        var height = main.scrollHeight;if(height>=48){
            main.style.height = height+"px";
            }else{
            main.style.height = 48+"px";
            }
    });
</script>