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

Posted zhehang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让文本框textarea自动适应内容的高度相关的知识,希望对你有一定的参考价值。

方法一:

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

以上是关于让文本框textarea自动适应内容的高度的主要内容,如果未能解决你的问题,请参考以下文章

获取textarea文本框所选字符光标位置索引,以及选中的文本值;textarea高度自适应,随着内容增加高度增加;获取输入框中的光标位置

实现文本框高度自适应的两种方法

如何让 textarea 文本框 高度自动伸缩

textarea多行文本框自适应高度

textarea高度自适应问题

微信小程序textArea输入框随着输入字数自适应高度