textarea高度自动变化

你的名字 2022-08-06 08:11 223阅读 0赞

最近用到了textarea 才一两行的数据就出现滚动条,会很难看,发现一种方法,让textarea随着内容的多少自动去变化，找到如下代码:

//工具方法,自适应textarea
        // 最小高度
        var minRows = 1;
        // 最大高度，超过则出现滚动条
        var maxRows = 4;
        function autoResize(t) {
            if (t.scrollTop == 0) t.scrollTop = 1;
            while (t.scrollTop == 0) {
                if (t.rows > minRows)
                    t.rows--;
                else
                    break;
                t.scrollTop = 1;
                if (t.rows < maxRows)
                    t.style.overflowY = "hidden";
                if (t.scrollTop > 0) {
                    t.rows++;
                    break;
                }
            }
            while (t.scrollTop > 0) {
                if (t.rows < maxRows) {
                    t.rows++;
                    if (t.scrollTop == 0) t.scrollTop = 1;
                }
                else {
                    t.style.overflowY = "auto";
                    break;
                }
            }
        }

<textarea  rows="1" style="width:5%;background:transparent;border:1px solid;float:left;margin-left:0px;overflow-y:hidden;resize:none" οnkeyup="autoResize(this)" ></textarea>

resize:none 不允许用户手动拖动textarea的大小,最好加上，若不加 ,**不手动拖动**，也不会有什么影响. 测试过已经成功

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 textarea 高度自适应

textarea 高度自适应页面代码 jquery代码页面代码 <div class="form-group">

深藏阁楼爱情的钟/ 2023年07月24日 02:01/ 0 赞/ 7 阅读

相关 textarea的高度自适应

textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。例

柔情只为你懂/ 2022年09月29日 15:55/ 0 赞/ 319 阅读

相关 textarea高度自动变化

最近用到了textarea 才一两行的数据就出现滚动条,会很难看,发现一种方法,让textarea随着内容的多少自动去变化，找到如下代码: //工具方法,自

你的名字/ 2022年08月06日 08:11/ 0 赞/ 224 阅读

相关 textarea 自适应内容高度

$('textarea').each(function(){ this.setAttribute('style', 'height:' + (this.s

约定不等于承诺〃/ 2022年06月09日 08:48/ 0 赞/ 308 阅读

相关 textarea高度自适应

之前虽然写了几篇关于textarea的高度自适应的解决方案，但都不甚满意，最近从Element的源码中得到启示，就自己写了一个textarea高度自适应的jquery插件。

ゞ浴缸里的玫瑰/ 2022年06月02日 07:09/ 0 赞/ 402 阅读

相关 textarea高度随内容自动改变

需求 textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。发现了一个比较

待我称王封你为后i/ 2022年06月02日 06:25/ 0 赞/ 209 阅读

相关 textarea高度自增

var observe; if (window.attachEvent) { observe = function (eleme

你的名字/ 2022年05月28日 01:00/ 0 赞/ 188 阅读

相关 textarea高度自适应

方法一、直接在textarea中添加oninput方法： <textarea οninput="this.style.height = this.scrollHeight +

超、凢脫俗/ 2022年04月05日 15:40/ 0 赞/ 377 阅读

相关 textarea高度自适应

textarea的高度根据键入的长度自适应高度，利用input事件，获取长度和设置高度； document.getElementById("text-adaption

谁践踏了优雅/ 2022年04月04日 06:22/ 0 赞/ 406 阅读

相关 textarea高度自适应，随着内容增加高度增加

原文出处：[https://www.cnblogs.com/purple04551/p/8075366.html][https_www.cnblogs.com_purple04

女爷i/ 2022年01月15日 04:05/ 0 赞/ 356 阅读