Der sauberste Trick für autharme Textbereiche

Anfang dieses Jahres schrieb ich einen Artikel über automatische Erweiterung von Textbereichen und Eingabefelden. Die Kernidee besteht darin, den Textbereich eher wie a zu machen<div> so dass seine Höhe automatisch entsprechend dem Inhalt eingestellt wird, um den aktuellen Wert zu berücksichtigen. Überraschenderweise gibt es noch keine einfache native Lösung, um dies zu erreichen, nicht wahr? Rückblickend auf diesen Artikel waren die Ideen, die ich vorlegte, nicht sehr ideal. Aber das am Ende des Artikels erwähnte Stephen Shaw -Schema ist ausgezeichnet. Daher möchte ich hervorheben und erklären, wie es funktioniert, weil es die endgültige Antwort auf solche Probleme der Benutzererfahrung zu sein scheint, bis wir eine bessere native Lösung erhalten. Wenn Sie nur die rennbaren Beispiele sehen möchten, lesen Sie die Demo:<h3 id="Der-Trick-besteht-darin-den-Inhalt-des-Textbereichs-genau-in-ein-Element-zu-kopieren-em-das-automatisch-die-Höhe-erweitern-und-seiner-Größe-entsprechen-kann-em"> Der Trick besteht darin, den Inhalt des Textbereichs genau in ein Element zu kopieren <em>, das automatisch die Höhe erweitern und seiner Größe entsprechen kann</em> .</h3> <p> Sie haben eine <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>和其他元素之间维护状态。我不会在这里包含示例，部分原因是我比较懒，但主要是因为我认为您应该理解其工作原理。这将使您更聪明，并更好地理解您的网站。