当前位置:首页 > 常用代码 > 正文

让文本框textarea自动适应内容的高度

作者:××× 来源:aa25.cn 【 】 浏览: 修改日期:2010-05-17 我要评论(6)     

方法一:

<textarea rows=1 cols=40 style='overflow:scroll;overflow-y:hidden;;overflow-x:hidden'
onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);"></textarea>

方法二:

<script>
var agt = navigator.userAgent.toLowerCase();
var is_op = (agt.indexOf("opera") != -1);
var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_op;
function ResizeTextarea(a,row){
    if(!a){return}
    if(!row)
        row=5;
    var b=a.value.split("\n");
    var c=is_ie?1:0;
    c+=b.length;
    var d=a.cols;
    if(d<=20){d=40}
    for(var e=0;e<b.length;e++){
        if(b[e].length>=d){
            c+=Math.ceil(b[e].length/d)
        }
    }
    c=Math.max(c,row);
    if(c!=a.rows){
        a.rows=c;
    }
}
</script>
<textarea style="overflow: hidden;  font-family: Verdana,Arial; font-style: normal;  font-size: 13px; line-height: normal; " rows="4" cols="30" onfocus="javascript:ResizeTextarea(this,4);" onclick="javascript:ResizeTextarea(this,4);" onkeyup="javascript:ResizeTextarea(this,4);"></textarea>


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖常用代码〗Tags: 文本框 textarea 自适应 自适应高度

更多评论(6)..会员评论

lidan19880201(220.231.*.*) 发表于:2010-05-17 09:33:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 为什么加上这句代码就不好使了呢!
管理员回复:内容已更新,可以支持了
蚂蚁(222.175.*.*) 发表于:2009-11-11 11:54:19
这个貌似不符合3C标准? 貌似不能带
D.PenG(58.210.*.*) 发表于:2009-09-23 10:42:35
文本框在id8里 字怎么都挤在一起了,都看不到了?我也要加你为好友,QQ:782437212请通过....
管理员回复:不会的的呀,你说的ID8是什么呀
乐乐(119.136.*.*) 发表于:2009-06-26 13:28:00
厉害。。一直不知道这个功能耶。。收藏了。呵呵
Guest(121.230.*.*) 发表于:2008-11-04 21:29:18
可以加你为好友吗?怎么和你联系?我的qq是15538868.
管理员回复:已经加你了,请通过
aaa(221.221.*.*) 发表于:2008-10-28 20:26:42
标准之路——www.aa25.cn提示:输入你的内容来这里看看, 这个文本框能自动适应你的内容多少, 自动伸缩高度
管理员回复:呵呵,少了个闭合标签,我刚看一下,文中是有的,但不知怎的显示到文本域中就没有了

出差旅游免费预订酒店

【视频教程】新手常见问题