Trik paling bersih untuk tekstasi autogrowing

Awal tahun ini, saya menulis artikel mengenai kawasan teks dan kotak input secara automatik. Idea teras adalah menjadikan kawasan teks lebih seperti a<div> , supaya ketinggiannya diselaraskan secara automatik mengikut kandungan untuk menampung nilai semasa. Yang menghairankan, tidak ada penyelesaian asli yang mudah untuk mencapai matlamat ini, bukan? Melihat kembali artikel itu, idea -idea yang saya buat tidak begitu ideal. Tetapi skim Stephen Shaw yang disebutkan pada akhir artikel ini sangat baik, jadi saya ingin menyerlahkan dan menjelaskan bagaimana ia berfungsi kerana ia seolah -olah menjadi jawapan terakhir kepada masalah pengalaman pengguna sedemikian sehingga kita mendapat penyelesaian asli yang lebih baik. Sekiranya anda ingin melihat hanya contoh yang boleh dijalankan, lihat demo:<h3 id="Caranya-adalah-dengan-tepat-menyalin-kandungan-kawasan-teks-ke-dalam-elemen-em-yang-secara-automatik-dapat-em-mengembangkan-ketinggian-dan-memadankan-saiznya"> Caranya adalah dengan tepat menyalin kandungan kawasan teks ke dalam elemen <em>yang secara automatik dapat</em> mengembangkan ketinggian dan memadankan saiznya.</h3> <p> Anda mempunyai <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>和其他元素之间维护状态。我不会在这里包含示例，部分原因是我比较懒，但主要是因为我认为您应该理解其工作原理。这将使您更聪明，并更好地理解您的网站。