如何让textarea在keyup事件中适配文本内容（解决收缩失效问题）

问题根源在于：当你通过textarea.style.height = ${textarea.scrollHeight}px``设置高度后，即使内容减少，scrollHeight会等于当前已经设置的元素高度（因为元素已经被撑开），所以无法自动收缩到适配新内容的高度。

修复方案 #

修改代码，在计算新高度前先将textarea的高度重置为auto，让浏览器重新计算当前内容的实际滚动高度，再设置为对应值：

const textarea = document.querySelector('textarea')
textarea.addEventListener('keyup', () => {
  // 重置高度，触发浏览器重新计算内容高度
  textarea.style.height = 'auto';
  // 设置为当前内容的滚动高度，适配文本
  textarea.style.height = `${textarea.scrollHeight}px`;
})

优化建议 #

将监听事件从keyup换成input，可以覆盖更多输入场景（比如粘贴文本、拖拽输入等），同时添加页面初始化时的高度适配：

const textarea = document.querySelector('textarea')

// 封装成复用函数
function resizeTextarea() {
  textarea.style.height = 'auto';
  textarea.style.height = `${textarea.scrollHeight}px`;
}

// 页面加载时自动适配初始内容高度
resizeTextarea();
// 监听所有输入事件实时调整
textarea.addEventListener('input', resizeTextarea);

内容的提问来源于stack exchange，提问作者Ah Fook