共计 965 个字符，预计需要花费 3 分钟才能阅读完成。
textarea 自适应的实现方法很多，原理其实比较简单：监听 textarea 的 input 或者键盘事件，获取元素的 scrollHeight, 重置 textarea 元素的高度。
预览地址：textarea
我们知道 textarea 有个 rows 的属性，改变 rows 的值可以改变 textarea 的高度，至于怎么改变不做探究，反正就是自带富察氏贵族血统 (hhhhhh), 所以思路就来了：当文本输入的时候，动态给 textarea 赋值 rows, rows 自会导致 textarea 的高度改变
接下来，问题就来了，如何动态获取 rows 的值？首先我们先看一下 textarea 与 rows, cols 以及浏览器的的关系是怎样的？可以参考张大神的文章 HTML textarea cols,rows 属性和宽度高度关系研究
猜测你已经看完了，大概得出一个结论就是：textarea 高度 ≈ lineHeight * rows. 这样思路就更清晰了。看代码
resizeHeight(elem, style) {
elem.removeAttribute(‘rows’)
elem.style.height = ‘auto’
const {scrollHeight} = elem
const {lineHeight, paddingTop, paddingBottom} = style
let rowsNum = Math.round((scrollHeight – paddingTop – paddingBottom) / lineHeight)
elem.setAttribute(‘rows’, rowsNum)
},
原理很简单，获取到元素的 scrollHeight(即元素真实高度), 与元素的行高求商，四舍五入。有同学说，直接把 scrollHeight 赋值给元素不就行了，这么麻烦，说的好有道理。是不是这样
const {scrollHeight} = elem
elem.style.height = `${scrollHeight}px`
貌似好像也行呀，pc 站好像没问题，不过笔者在移动端测试的时候删除的时候，貌似有点小问题。换成改成获取 rows 的方法就好了，毕竟血统在那里摆着，textarea 也得给点面子。
如果 textarea 设置 padding 的话，需要减去上下 padding 的值，代码中也有体现。
有问题欢迎交流，最后附上源码。
查看源码：源码
