如何实现一个 autoSize 的 textarea

前言

熟悉 ant-design-vue 的小伙伴应该知道，<a-textarea auto-size /> 可以渲染出一个自适应高度的 textarea（即：高度随着内容的变化而变化）；本文将介绍一下这样一个功能是如何实现的。

实现思路

如果我们能够实时的知道 textarea 元素中文本的高度，那么这个功能就很好实现了，只需要实时的将文本的高度赋值给 textarea 元素即可。

但是如何能够实时的知道 textarea 元素中文本的高度呢？这好像并不容易实现，那么我们可以换一种思路，如果有另外一个隐藏起来的 textarea（后文简称 hiddenTextarea）, 它的所有尺寸相关 css 属性都与原本的 textarea 保持一致且文本内容也一致，那么这个需求就有可能可以实现；但问题在于 textarea 文本超出高度后会显示滚动条，而不是像其他普通元素一样更新元素的高度（如果是这样，那本文也没必要存在了[手动狗头]）。

DOM 中有一个属性叫做 scrollHeight，我们可以获取 hiddenTextarea 的 scrollHeight 属性，将它的值赋值给原本 textarea 的 height 属性，那就实现了这个需求；接下来我们来看看具体如何实现。

实现

首先需要创建一个 hiddenTextarea，同时保证其尺寸相关的 css 属性都与原本的 textarea 保持一致，我们先来看看有哪些属性是与尺寸相关的：

ts 复制代码

const SIZING_STYLE = [
  'letter-spacing',
  'line-height',
  'padding-top',
  'padding-bottom',
  'font-family',
  'font-weight',
  'font-size',
  'font-variant',
  'text-rendering',
  'text-transform',
  'width',
  'text-indent',
  'padding-left',
  'padding-right',
  'border-width',
  'box-sizing',
  'word-break',
];

只需要将两个 textarea 的这些属性保持一致，那么他们的尺寸就会保持一致。

通过 window.getComputedStyle 方法获取原本 textarea 的属性值。

ts 复制代码

const style = window.getComputedStyle(textarea)
const sizingStyle = SIZING_STYLE.map(prop => `${prop}: ${style.getPropertyValue(prop)}`).join(';')

将属性值设置到 hiddenTextarea 上：

ts 复制代码

hiddenTextarea.setAttribute('style', `${sizingStyle};`);

获取 hiddenTextarea 的 scrollHeight 赋值给 textarea 的 height

ts 复制代码

textarea.style.height = hiddenTextarea.scrollHeight

如此，就实现了一个自适应高度的 textarea。

结语

本文主要介绍了如何实现 textarea 自适应高度的原理。