乐趣区

关于前端:自动增长Textareas的最干净技巧

jiezi

想法是使 <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 和文本元素的换行行为。

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

退出移动版