自動序文の最もきれいなトリック

今年の初めに、テキスト領域と入力ボックスの自動拡張に関する記事を書きました。核となるアイデアは、テキスト領域をより多くのようにすることです<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>和其他元素之间维护状态。我不会在这里包含示例，部分原因是我比较懒，但主要是因为我认为您应该理解其工作原理。这将使您更聪明，并更好地理解您的网站。