自动增长Textareas的最干净技巧-技术圈

翻译 | https://blog.zhangbing.site/2020/12/02/the-cleanest-trick-for-autogrowing-textareas/
原文 | https://css-tricks.com/

想法是使更像 <div>，因此它的高度可以扩展以包含当前值。这几乎是奇怪的，没有一个简单的原生解决方案，不是吗？ 现在我得到了一个非常好的原生解决方案。这里是演示，如果你只是想要一个工作的例子。html:<pre><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><h1>Auto-Growing <code><textarea></code></h1></code><code> </code><code><form action="#0"></code><code> <label for="text">Text:</label></code><code> <div class="grow-wrap"></code><code> <textarea</code><code> name="text"</code><code> id="text"</code><code> onInput="this.parentNode.dataset.replicatedValue = this.value"</code><code> ></textarea></code><code> </div></code><code></form></code></pre></section></pre>CSS:<pre><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="css"><code>.grow-wrap {</code><code> /* 简单的方法将元素叠加在一起，并根据最高者的高度确定它们的大小。*/</code><code> display: grid;</code><code>}</code><code>.grow-wrap::after {</code><code> /* 注意奇怪的空间！需要预防跳动行为 */</code><code> content: attr(>) " ";</code><code> </code><code> /* 这就是textarea文本的表现形式 */</code><code> white-space: pre-wrap;</code><code> </code><code> /* 隐藏在视图，点击和屏幕阅读器中 */</code><code> visibility: hidden;</code><code>}</code><code>.grow-wrap > textarea {</code><code> /* 您可以保留此设置，但是在用户调整大小后，它将破坏自动调整大小 */</code><code> resize: none;</code><code> </code><code> /* Firefox显示增长的滚动条，您可以像这样隐藏。*/</code><code> overflow: hidden;</code><code>}</code><code>.grow-wrap > textarea,</code><code>.grow-wrap::after {</code><code> /* 需要相同的样式！*/</code><code> border: 1px solid black;</code><code> padding: 0.5rem;</code><code> font: inherit;</code><code> </code><code> /* 放在彼此之上 */</code><code> grid-area: 1 / 1 / 2 / 2;</code><code>}</code><code> </code><code>body {</code><code> margin: 2rem;</code><code> font: 1rem/1.4 system-ui, sans-serif;</code><code>}</code><code> </code><code>label {</code><code> display: block;</code><code>}</code></pre></section></pre>效果：<p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);"> <img data-ratio="0.7682291666666666" src="https://filescdn.proginn.com/3187c6f3301251df5321770b930685db/e4bb9cf967bd62d23dc2973cbc534258.webp" data-type="gif" data-w="768"><p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);"> 诀窍是，你要准确地将 <textarea> 的内容复制到一个可以自动展开高度的元素中，并匹配它的大小。所以你有一个 <textarea>，它不能自动展开高度。相反，您可以在另一个元素中完全复制该元素的外观，内容和位置，再复制的元素隐藏起来。<p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);"> <img data-ratio="0.6680497925311203" src="https://filescdn.proginn.com/021a4f495d43ed1bf50fef46fa0af533/fb6de1c4585825133592db6127c0564f.webp" data-type="jpeg" data-w="723"> <p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);"> 现在，这三个元素都是相互联系的。无论哪一个子元素最高，都会把父元素推到那个高度，而另一个子元素也会跟随。这意味着 <textarea> 的最小高度将成为“基础”高度，但是如果复制的文本元素碰巧变高了，所有的东西也会随之变高。好聪明，我太喜欢了。您需要确保复制的元素完全相同相同的字体，相同的填充，相同的页边距，相同的边框…所有内容。这是一个相同的副本，只是在视觉上隐藏了 visibility: hidden;；如果不是完全一样的，那么所有的东西都不会完全正确地生长在一起。我们还需要在复制的文本上 white-space: pre-wrap; ，因为这就是 textareas 的表现。这是最奇怪的部分在我的演示中，我将 ::after 用于复制的文本。我不确定这是否是最好的方法。对我来说感觉很干净，但是我想知道使用 <div aria-hidden =“ true”> 对于屏幕阅读器是否更安全？或 visibility: hidden; 够了吗？无论如何，那不是奇怪的部分。这是奇怪的部分：css<pre><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li></ul><pre class="code-snippet__js" data-lang="javascript"><code>content: attr(>) " ";</code></pre></section></pre>因为我使用的是伪元素，伪元素是将 data 属性从元素中取出并以额外的空间将内容呈现到页面的行(这是奇怪的部分)。如果你不这样做，最终的结果会让人感觉 “跳脱”。我不能说我完全理解它，但它似乎更好地尊重了跨 textarea 和文本元素的换行行为。如果你不想使用伪元素，嘿嘿，我没意见，只要注意跳动的行为即可。完整示例和代码：https://codepen.io/chriscoyier/pen/XWKEVLy<section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);">本文完〜</section><section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);"> </section><section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);text-align: left;"><img class="rich_pages" data-ratio="0.044444444444444446" data-s="300,640" data-type="jpeg" data-w="900" src="https://filescdn.proginn.com/d9ba959cb95917191d40da5c723f9344/1d1d9e2916c7ee36a6b420ca7adc1fe1.webp" style="box-sizing: border-box !important;visibility: visible !important;width: 677px !important;"></section><section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);text-align: left;"></section> </div></div></div><div class="tag-list-box"><div class="tag-list"><div class="tag-list-container"></div></div></div>浏览 16<div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan">点赞 </div><div class="gap"></div><a href="#comments" class="item">评论 </a><div class="item qinglite-collect">收藏 </div><div class="item qinglite_share">分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt="">手机扫一扫分享</div></div><div class="expand"></div><div class="item jubao qinglite-jubao">举报</div></div></div></div><div class="comments_wrapper comments"><div class="title">评论</div><div id="comments" class="comments"><div class="error"></div><div class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="输入评论">

图片

表情