想法是使 <textarea> 更像 <div>，因而它的高度能够扩大以蕴含以后值。这简直是奇怪的，没有一个简略的原生解决方案，不是吗？

当初我失去了一个十分好的原生解决方案。

这里是演示，如果你只是想要一个工作的例子

<h1>Auto-Growing <code>&lt;textarea></code></h1><form action="#0">  <label for="text">Text:</label>  <div class="grow-wrap">    <textarea name="text" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>  </div></form>
.grow-wrap {  /* 简略的办法将元素叠加在一起，并依据最高者的高度确定它们的大小。 */  display: grid;}.grow-wrap::after {  /* 留神奇怪的空间！须要预防跳动行为 */  content: attr(data-replicated-value) " ";  /* 这就是textarea文本的表现形式 */  white-space: pre-wrap;  /* 暗藏在视图，点击和屏幕阅读器中 */  visibility: hidden;}.grow-wrap > textarea {  /* 您能够保留此设置，然而在用户调整大小后，它将毁坏主动调整大小 */  resize: none;  /* Firefox显示增长的滚动条，您能够像这样暗藏。 */  overflow: hidden;}.grow-wrap > textarea,.grow-wrap::after {  /* 须要雷同的款式！ */  border: 1px solid black;  padding: 0.5rem;  font: inherit;  /* 放在彼此之上 */  grid-area: 1 / 1 / 2 / 2;}body {  margin: 2rem;  font: 1rem/1.4 system-ui, sans-serif;}label {  display: block;}

成果

窍门是，你要精确地将 <textarea> 的内容复制到一个能够主动开展高度的元素中，并匹配它的大小。

所以你有一个 <textarea>，它不能主动开展高度。

相同，您能够在另一个元素中齐全复制该元素的外观，内容和地位，再复制的元素暗藏起来。

当初，这三个元素都是互相分割的。无论哪一个子元素最高，都会把父元素推到那个高度，而另一个子元素也会追随。这意味着 <textarea> 的最小高度将成为“根底”高度，然而如果复制的文本元素碰巧变高了，所有的货色也会随之变高。

好聪慧，我太喜爱了。

您须要确保复制的元素完全相同

雷同的字体，雷同的填充，雷同的页边距，雷同的边框...所有内容。这是一个雷同的正本，只是在视觉上暗藏了 visibility: hidden;；如果不是齐全一样的，那么所有的货色都不会完全正确地成长在一起。

咱们还须要在复制的文本上 white-space: pre-wrap; ，因为这就是textareas的体现。

这是最奇怪的局部

在我的演示中，我将 ::after 用于复制的文本。我不确定这是否是最好的办法。对我来说感觉很洁净，然而我想晓得应用 <div aria-hidden =“ true”> 对于屏幕阅读器是否更平安？

或 visibility: hidden; 够了吗？无论如何，那不是奇怪的局部。这是奇怪的局部：

content: attr(data-replicated-value) " ";

因为我应用的是伪元素，伪元素是将 data 属性从元素中取出并以额定的空间将内容出现到页面的行(这是奇怪的局部)。如果你不这样做，最终的后果会让人感觉 "跳脱"。我不能说我齐全了解它，但它仿佛更好地尊重了跨textarea和文本元素的换行行为。

如果你不想应用伪元素，嘿嘿，我没意见，只有留神跳动的行为即可。