/*
* 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>
posted on 2012-11-17 20:40  somesayss  阅读(4607)  评论(1编辑  收藏  举报