자가 조영 텍스토리를위한 가장 깨끗한 트릭

올해 초, 나는 텍스트 영역과 입력 상자를 자동으로 확장하는 것에 관한 기사를 썼습니다. 핵심 아이디어는 텍스트 영역을 더 비슷하게 만드는 것입니다.<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>和其他元素之间维护状态。我不会在这里包含示例，部分原因是我比较懒，但主要是因为我认为您应该理解其工作原理。这将使您更聪明，并更好地理解您的网站。