JS_textarea自适应高度

本文介绍了如何在不同浏览器中实现文本区域的高度自适应,包括IE6-8使用onpropertychange,FF、Chrome、Opera获取正确高度,以及IE9中通过绑定onkeyup解决退格键触发问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

转载于:https://www.cnblogs.com/somesayss/archive/2012/11/17/2773692.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值