L'astuce la plus propre pour la texte automatique

Plus tôt cette année, j'ai écrit un article sur l'expansion automatique des zones de texte et des zones d'entrée. L'idée principale est de rendre la zone de texte plus comme un<div> , de sorte que sa hauteur est automatiquement ajustée en fonction du contenu pour s'adapter à la valeur actuelle. Étonnamment, il n'y a pas encore de solution native simple pour y parvenir, n'est-ce pas? En repensant à cet article, les idées que je proposais n'étaient pas très idéales. Mais le schéma Stephen Shaw mentionné à la fin de l'article est excellent, donc je veux mettre en évidence et expliquer comment cela fonctionne car il semble être la réponse finale à ces problèmes d'expérience utilisateur jusqu'à ce que nous obtenions une meilleure solution native. Si vous voulez voir uniquement les exemples de course, consultez la démo:<h3 id="L-astuce-consiste-à-copier-avec-précision-le-contenu-de-la-zone-de-texte-en-un-élément-em-qui-peut-em-agrandir-automatiquement-la-hauteur-et-correspondre-à-sa-taille"> L'astuce consiste à copier avec précision le contenu de la zone de texte en un élément <em>qui peut</em> agrandir automatiquement la hauteur et correspondre à sa taille.</h3> <p> Vous avez un <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>和其他元素之间维护状态。我不会在这里包含示例，部分原因是我比较懒，但主要是因为我认为您应该理解其工作原理。这将使您更聪明，并更好地理解您的网站。