沐鳴網址_自動增長Textareas的最乾淨技巧

想法是使 <textarea> 更像 <div>,因此它的高度可以擴展以包含當前值。這幾乎是奇怪的,沒有一個簡單的原生解決方案,不是嗎?

現在我得到了一個非常好的原生解決方案。

這裡是演示,如果你只是想要一個工作的例子


html

<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>


css

.grow-wrap {
  /* 簡單的方法將元素疊加在一起,並根據最高者的高度確定它們的大小。 */
  display: grid;
}
.grow-wrap::after {
  /* 注意奇怪的空間!需要預防跳動行為 */
  content: attr(>) " ";

  /* 這就是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; 夠了嗎?無論如何,那不是奇怪的部分。這是奇怪的部分:


css

content: attr(>) " ";

因為我使用的是偽元素,偽元素是將 data 屬性從元素中取出並以額外的空間將內容呈現到頁面的行(這是奇怪的部分)。如果你不這樣做,最終的結果會讓人感覺 “跳脫”。我不能說我完全理解它,但它似乎更好地尊重了跨 textarea 和文本元素的換行行為。

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

完整示例和代碼:https://codepen.io/chriscoyier/pen/XWKEVLy

原文:https://blog.zhangbing.site/2020/12/02/the-cleanest-trick-for-autogrowing-textareas/

來源:https://css-tricks.com/

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9946