自動流動文本的最乾淨的技巧

今年早些時候，我寫了一篇關於自動擴展文本區域和輸入框的文章。其核心思想是讓文本區域更像一個<div>，使其高度根據內容自動調整，以容納當前值。 令人驚訝的是，目前還沒有簡單的原生解決方案來實現這一點，不是嗎？ 回顧那篇文章，我提出的想法都不太理想。但文章結尾處提到的Stephen Shaw的方案卻非常出色，因此我想重點介紹一下，並講解其工作原理，因為它似乎是解決此類用戶體驗問題的最終答案，直到我們獲得更好的原生方案。如果您只想查看可運行的示例，請查看演示：<h3 id="技巧在於精確複製文本區域的內容到一個-em-可以-em-自動擴展高度的元素中-並使其大小匹配">技巧在於精確複製文本區域的內容到一個<em>可以</em>自動擴展高度的元素中，並使其大小匹配。</h3> <p>您有一個<code><textarea></textarea>，它无法自动扩展高度。

相反，您需要在另一个元素中精确复制<textarea></textarea>的外观、内容和位置。您可以隐藏副本的视觉效果（也可以保留实际功能的<textarea></textarea>可见）。

现在，这三个元素相互关联。最高的子元素会将父元素的高度推高，其他子元素也会随之调整。这意味着<textarea></textarea>的最小高度将成为“基准”高度，但如果复制的文本元素变得更高，则所有元素都会随之变高。

如此巧妙！我非常喜欢它。

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

相同的字体、相同的填充、相同的边距、相同的边框……一切都要相同。它是一个完全相同的副本，只是通过visibility: hidden;隐藏了视觉效果。如果两者不完全相同，则所有元素的高度不会完全同步。

我们还需要在复制的文本上使用white-space: pre-wrap;，因为这是<textarea></textarea>的行为方式。

这是最奇怪的部分

在我的演示中，我使用::after来创建复制的文本。我不确定这是否是最佳方法。对我来说，这感觉很简洁，但我不知道使用<div aria-hidden="true">对于屏幕阅读器是否更安全？或者<code>visibility: hidden;就足够了吗？无论如何，这还不是最奇怪的部分。最奇怪的部分是：

<code>content: attr(data-replicated-value) " ";</code>

因为我使用的是伪元素，所以这一行将数据属性从元素中获取，并将内容呈现到页面上并添加了一个额外的空格（这就是最奇怪的部分）。如果您不这样做，最终结果会显得“跳跃”。我无法完全理解其中的原因，但它似乎能更好地处理<textarea></textarea>和文本元素之间的换行符行为。

如果您不想使用伪元素，也可以，但请注意“跳跃”行为。

特别感谢WillEarp和MartinTillmann，他们都在同一天随机发邮件提醒我Shaw的技巧有多么巧妙。这是Martin使用Alpine.js和Tailwind制作的示例，最终也类似于单行代码（但请注意它存在“跳跃”问题）。

我相信大家可以想象如何使用Vue和React等框架来实现这一点，并轻松地在<textarea></textarea>和其他元素之间维护状态。我不会在这里包含示例，部分原因是我比较懒，但主要是因为我认为您应该理解其工作原理。这将使您更聪明，并更好地理解您的网站。