textarea自动适应内容的高度

来源：互联网发布：概率论知乎编辑：程序博客网时间：2024/04/28 17:31

方法一:

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

方法三：

<script type="text/javascript">    //基本函数*2    var addHandler = window.addEventListener?    function(elem,event,handler){elem.addEventListener(event,handler);}:    function(elem,event,handler){elem.attachEvent("on"+event,handler);};    var $ = function(id){return document.getElementById(id);}    function autoTextArea(elemid){        //新建一个textarea用户计算高度        if(!$("_textareacopy")){            var t = document.createElement("textarea");            t.id="_textareacopy";            t.style.position="absolute";            t.style.left="-9999px";            document.body.appendChild(t);        }        function change(){            $("_textareacopy").value= $(elemid).value;            $(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";        }        addHandler($("target"),"propertychange",change);//for IE        addHandler($("target"),"input",change);// for !IE        $(elemid).style.overflow="hidden";//一处隐藏，必须的。        $(elemid).style.resize="none";//去掉textarea能拖拽放大/缩小高度/宽度功能    }     addHandler(window,"load",function(){    autoTextArea("target");    });</script><textarea id="target" rows="" cols=""></textarea></body></html>

调试成功案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><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><br/><br/><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></body></html>

0 0