textarea实现高度自适应的理解

今天遇到个需求：要求 textarea 初始只显示一行，当用户输入内容过多引起换行，或者手动敲回车键换行时，textarea 内容区域自动撑开。

这个简单，于是我敲下大致如下代码：

// html
<textarea id="codePath" rows="1"></textarea>

// js
let codePath = document.getElementById('codePath');

codePath.addEventListener('input', function () {
     let _this = this;
     _this.style.height = `${_this.scrollHeight}px`;
})

页面初始化的时候如下：

输入长段内容或手动按回车键后，如下：

看起来似乎是完美实现了需求，但是当我删除一部分内容的时候，就傻眼了：

没错，用户输入的时候，用 scrollHeight 去改变 height 的值，textarea内容区域会随着输入内容行数增加而撑开，但是不会随着输入内容行数的减少而缩回去。

网上找了些解决方案，无非就是用一大段脚本，来创建一个隐藏的 div 元素，再同步 div 的 innerHTML 和 textarea 的 value，再把 div 高度赋给 textarea；或者隐藏 textarea，用 p 来代替，给 p 设置 contenteditable 属性，同步 textarea 的数据之类。

都太复杂，我隐约觉得开头那一段代码就能解决问题。

经过反复调试，我意外写下如下测试代码，竟完美解决问题：

let codePath = document.getElementById('codePath');

codePath.addEventListener('input', function () {
    let _this = this;
    _this.style.height = 'auto';
    _this.style.height = `${_this.scrollHeight}px`;
})

这是为什么呢，经过调试，发现如下现象：

// 调试代码
let codePath = document.getElementById('codePath');

codePath.addEventListener('input', function () {
    let _this = this;
    console.log(_this.scrollHeight)
    _this.style.height = `${_this.scrollHeight}px`;
})

用如上调试代码测试，当 textarea 的内容从1行增加到6行，再删除至1行时，console 输出如下：

没错，内容行增加时，scrollHeight 是正常随之改变的，但是在内容行减少时，scrollHeight 不会再改变了，会继续保持最大值。

经观察和思索，这行代码有猫腻 ：

_this.style.height = `${_this.scrollHeight}px`;

当内容行增加到6行时，相当于给 textarea 设置了一个120px的固定高度，因为设置了固定高度，当内容行减少时， textarea 不会被继续撑开，scrollHeight 不会再改变，height 就保持原有值。

可做个简单测试，给 textarea 设置一个固定高度，比如 200px，当你在这个 textarea 里从1行内容输入到6行内容，再删除至1行内容， textarea 的 scrollHeight 没有任何变化，因为内容没有超出 textarea 的区域，不会出现滚动条，scrollHeight 值就不会变化。

既然是固定高度引起的原因，解决的思路就清晰了，给 textarea 设置 height 前，手动去除其原有高度即可，当被去除了高度， textarea 无论有几行内容，都会出现滚动条，其实际内容高度（也就是scrollHeight）就能获取到正确的值，再将其值付给 height ，即可完美实现自适应。

所以，如下代码中_this.style.height = 'auto';的 auto ，改成 0 或者“1px”也行，只要数值小于一行内容行的高度，能去除原有高度就行。

let codePath = document.getElementById('codePath');

codePath.addEventListener('input', function () {
    let _this = this;
    _this.style.height = 'auto';
    _this.style.height = `${_this.scrollHeight}px`;
})

---

一句话日记：知其然，知其所以然，那些高手，一定是人码合一