JS 9行代码实现Textarea高度自适应

目录

1.代码展示

2.代码讲解

3.代码原理

1.代码展示

maininput.oninput = function () {
    maininput.style.height = 'auto'
    let contentheight = maininput.scrollHeight
    if (contentheight > 300) {
        maininput.style.height = 300 + "px"
    } else {
        maininput.style.height = contentheight + "px"
    }
}

利端:非常简单,容易理解

弊端:需指定行高, 且transition会失效

需求:指定行高

备注:最少显示行数需使用rows属性指定

---

2.代码讲解

第一行:maininput.oninput = function () {}

maininput(输入框名称)

参看文献:【input】输入框事件总结

给输入框绑定监听函数,当输入框内容发生任何改变时执行后面的函数

第二行:maininput.style.height = 'auto'

设置输入框高度为"自适应"

第三行:let contentheight = maininput.scrollHeight

定义一个变量,存储输入框高度.如果输入框设置了padding,则再减去上下padding的总和(单位为像素),例如我的输入框padding样式为20px,则该代码为let contentheight = maininput.scrollHeight - 40

第四行:if (contentheight > 300) {}

该代码的作用是判断输入框高度是否超过了指定值(300,单位px),用来限制输入框最大高度,如果输入框没有最大高度(无限制),则直接保留else语句内容即可

值为行高*最大显示行数

第五行:maininput.style.height = 300 + "px"

搭配第四行,当输入框达到最大高度后,设置一个固定高度

第六行:else {}

字面意思,既输入框高度未达到最大高度时执行指定语句

第七行:maininput.style.height = contentheight + "px"

将输入框高度设置为获取到的实际高度

---

3.代码原理

该代码主要利用了最简单的获取和设置输入框高度来计算行数,不必计算输入内容或者其他巴拉巴拉的方式去计算

代码核心依赖为输入框的行高,所以请务必设置行高或通过其他方式获取行高

首先,输入框产生变化时,使输入框高度产生变化的条件有两个,分别为增加一行和删除一行

删除一行(统计最少行数):

该功能依赖核心为第二行:maininput.style.height = 'auto'

作用为:使输入框高度为auto,该auto的值默认为行高*剩余行数+上下padding,从而达到删除一行内容输入框高度随之减少的效果

而利用scrollHeight则会连带着被删除的那一行一块计算,导致输入框高度为行高*最大行数+上下padding,因而无法缩短

例:由4行减少至三行时

auto值为行高*剩余行数(3行)+上下padding

scrollHeight值为行高*最大行数(4行)+上下padding

增加一行(统计最大行数):

依赖核心:let contentheight = maininput.scrollHeight

根据本人观察.scrollHeight获取的值为行高*最大行数+上下padding,所以存在padding请在本行内减去值防止效果出错

获取到高度后进行后面语句巴拉巴拉

例:由3行变为4行时

scrollHeight值为行高*最大行数(4行)+上下padding

换一种说法就是

scrollHeight获取的行数是存在过的最大行数

17行删到10行,我只认17行,因为他是存在过的最大的值

auto则是获取目前已有的行数

17行删到10行,就是10行,因为他是实质存在的值

同时auto会刷新scrollHeight记忆的,最大的值

既auto后的scrollHeight

17行删到10行,就是10行,因为auto在scrollHeight前,他告诉scrollHeight值为10,那scrollHeight就认为是10

语文不好,不知道怎么形容只能这么形容,请谅解