记录一个小知识点，textarea如何根据内容自动变化高度及踩坑

希望看了我的一篇文章可以节省你工作中一分钟的时间

如何实现

我在仿写微软的TODO表单应用的时候，看到了他的一个多行文本编辑，编辑的时候文本框的高度可以自动变化，记得element-ui的textarea也有类似的效果，于是乎打开百度进行搜索，原理其实很简单，将textarea标签和pre标签放在一个div中，将textarea绑定的文本内容同步的显示在pre标签中，用pre标签撑起元素高度并设置 visibility: hidden; // 不可见但占位置 再将textarea标签设置为绝对定位，高度设置100%就可以啦。

<div class="wrap">
  <pre class="pre">{{ renameValue }} </pre>
  <textarea
    class="rename-textarea"
    v-model="renameValue"
    placeholder="请填写备注"
    @blur="renameSubmit('blur')"
  ></textarea>
</div>
复制代码

.wrap {
    position: relative;
    .pre {
      width: 100%;
      display: block;
      white-space: pre-wrap;
      word-break: break-all;
      font-weight: inherit;
      line-height: 1.5;
      visibility: hidden;
    }
    .rename-textarea {
      resize: none;
      word-break: break-all;
      font-weight: inherit;
      position: absolute;
      line-height: 1.5;
      height: 100%;
      width: 100%;
      top: 0;
      background: transparent;
    }
}
复制代码

这样写就会发现，当初始值为空的时候，pre根本显示不出来，textarea的高度就是0，根本无法输入，于是我们给pre标签设置一个默认值就可以了

<pre class="pre">{{ renameValue || 'text'}}</pre>
复制代码

踩坑

上面的代码看似没问题，但只要我们实际操作一下就会发现，当我们按回车的时候，第一行的内容会不见，我找了好久，终于发现问题出在pre标签上，当我们按回车时，pre标签会不显示最后一个回车，比如我们按一个回车，在textarea里是两行，在pre标签中就是一行，其实这样描述并不正确，因为我们按回车时，它所占的内容确实只有一行，我们在textarea中之所以能够看到两行，是因为输入框为了更符合视觉效果，让我们知道在书写第二行，所以显示的有两行，但其实这时候第二行的内容是空，这时候我们实际的内容只有一行，所以怎么解决呢？我们只要让pre额外展示一个空格就行了（不能是字，只能是空格），这样当我们回车时，第二行会有一个空格，pre的占位就会占两行，就能正常显示了。

<pre class="pre">{{ renameValue }} </pre>
复制代码