/*
* 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>