textarea 高度自适应(chrome+ie8测试有效)

博客介绍了如何实现textarea在Chrome和IE8下高度自适应的方法,通过结合js和css来处理,同时指出其他浏览器兼容性未测试。
摘要由CSDN通过智能技术生成

最近有一个需求,需要让textarea宽度不变,但是高度随着用户的输入高度自适应。由于浏览器版本的不兼容,很多方法通常只能在一个浏览器中起作用。

下面我写了一个小的demo,可以在chrome 和 ie8下正常使用,其他浏览器没有测试过。

第一种方式使用 js+css方式实现

<textarea rows='6' cols='100' style='overflow:scroll;overflow-y:visible;height:96px;width:679px;overflow-x:hidden' 
οnfοcus="window.activeobj=this;this.clock=setInterval(function(){ if(activeobj.scrollHeight>96)activeobj.style.height=activeobj.scrollHeight+'px';},200);" οnblur="clearInterval(this.clock);"></textarea>

rows 指定高,cols指定宽度 。 另外,在style中加入height也是指定高度,其高度也刚好是rows=6 。在style中重新用height指定高度是因为其 overflow-y:visible 属性的指定,在chrome下会使其高度为1行。在该textarea获得鼠标焦点后,会执行代码

 if(activeobj.scrollHeight>96)activeobj.style.height=activeobj.scrollHeight+'px';
200毫秒执行一次,用来改变textarea的高度。 
activeobj.scrollHeight>96 
是让其在内容高度大于textarea的初始高度之后再自适应。
chrome下的效果图
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu0AAAByCAYAAADnEe/YAAAT4ElEQVR4Ae3deYwU5b7G8aeX2VdmhmE5MqhsUS7Idl0wmDuRIAYNiIcoqHE51xAUTQCFP0yQqGgwynWNGoIGAYkCLiHRGALJ8Rw0geTmKt7AZWAMuzPDMsMwW6+334Ka0z3WDANMV/c43zJjV1dX1furT//z9Mtbb3n2nWiOVp8J6h//vU9mGTZsmKLRqLXe1f9aW1t1/vx5lZWVWbt5vV7V1dVpz549mjx5soqKiqzzBAIBnT17Vs3NzYpEIta+Pp9Pubm5Ki4uVmZmZlfN8BkCCCCAAAIIIIAAAmklYKLyoMIMDSvL1ODiTBXn+pNen2fbL2ejP/1SpcZYAPd4PIpGYlV4utOux9otqosBP+4ldhpZmy+ex9rT2hh33tjVth8bt5lVBBBAAAEEEEAAAQTcEIiaNNuNzuqOtZgO7oL8fP3HxFEaNSBbFSWZ8nbMuh0Pusr3/uMNAQWDIVUM7K+K8sJYb/jF9H2lJ7YD+5Uez3EIIIAAAggggAACCCRZwO8JaVBOMDb6I08eb6yLORa6fbGRI2bxeLyxvwsFmO1mMRk5Go2NGomNHPmtpl5//78G1TYGNbgoQ4FQVNkZFw+4cFiP/99vTm+Gq1w/uEQTh5Urw9shtNsVX8GvkB6vlhMigAACCCCAAAIIIHDVAh5FQm3KDJ1TYWxItxnmbXrKTSY2i8eEdzsD20NQYoE9aoZ6R8LWgJJ/HmpSOJaPg+GorrbPuzuX0z4AJxwrwh8L7IOLM7pzHPsggAACCCCAAAIIINBrBdraQjp1KqJQOCLTZ2161CMXA7r93lzcv3raIxfuz4xlZpOb3V7aQ3t8w8FgUNu3b7f+jh49qo8++kilpaXxu7COAAIIIIAAAggggECvFehtg0gcQ3tTU5PWr1+v48eP6/DhwwqHw732C6FwBBBAAAEEEEAAAQS6K2B61s1wGbuH3RzXnZkVu3v+K93PMbSb6Ro3bdqk3bt369FHH02LQq/0AjkOAQQQQAABBBBAAIHuCJiw3tLSYk1Xbjqx/X6/NUV5SUlJdw5P6j6Ood3+ZdHW1pbUxjk5AggggAACCCCAAALpIGACu3kGUXV1tUwGtvPwmTNnrO1DhgxJaZkX5rVJaQk0jgACCCCAAAIIIIBAagXMQ0CPHTtm9bRbs8nEQrw9TKa2ttbqfTfvU7WkruVUXTHtIoAAAggggAACCCAQJ2B61QOBgNWj7hTMzZj2+vr6uCPcX+0ytNv/LGC/ul8eLSKAAAIIIIAAAgggkFwBk3VDoVCnk6/YoT65VXR9dsfQbn5NmMLNeB7zTwXm1bxnQQABBBBAAAEEEEAAAfcFHEN7Y2OjZs6cqccee0xVVVWqrKzUggUL3K+OFhFAAAEEEEAAAQQQQECOs8fk5eXp1VdfVWtrqzXVjXnYUnFxMVwIIIAAAggggAACCCCQAgHH0O7z+XTTTTeloByaRAABBBBAAAEEEE
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值