自動增長Textareas的最乾淨技巧「心得分享」

想法是使 <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和文字元素的換行行為。

如果你不想使用偽元素，嘿嘿，我沒意見，只要注意跳動的行為即可。

作者：杭州程式設計師張張