自动增长Textareas的最简洁技巧

.grow-wrap{/*将元素堆叠在一起并根据最高元素的高度调整大小的简单方法。*/display:grid;}.grow-wrap::after{/*注意奇怪的空格！需要防止弹跳行为*/content:attr(data-replicated-value)"";/*这就是textarea文本的样子*/white-space:pre-wrap;/*从视图、点击和屏幕阅读器中隐藏*/visibility:hidden;}.grow-wrap>textarea{/*你可以保留它，但它会在用户调整大小后中断自动调整*/resize:none;/*Firefox显示一个不断增长的滚动条，你可以这样隐藏。*/overflow:hidden;}.grow-wrap>textarea,.grow-wrap::after{/*需要相同的样式！*/border:1px纯黑色;填充：0.5rem；字体：继承；/*彼此重叠*/grid-area:1/1/2/2;}正文{保证金：2rem;font:1rem/1.4system-ui,sans-serif;}label{display:block;}效果诀窍是你必须将的内容准确地复制到一个自动扩展高度并匹配其大小的元素中。所以你有一个不能自动扩展高度的<textarea>。相反，您可以在另一个元素中完全复制该元素的外观、内容和位置，并隐藏复制的元素。现在，所有三个元素都相互关联。无论哪个孩子最高，都会将父母推到那个高度，另一个孩子会跟随。这意味着<textarea>的最小高度将成为“基本”高度，但如果复制的文本元素恰好更高，所有内容也会更高。太聪明了，我非常喜欢它。您需要确保复制的元素具有完全相同的字体、相同的填充、相同的边距、相同的边框……一切。这是一个相同的副本，只是在视觉上隐藏了可见性：隐藏；；如果它不完全相同，那么一切都不会完全正确地一起生长。我们还需要white-space:pre-wrap;在复制的文本上，因为这就是文本区域的行为方式。这是最奇怪的部分在我的演示中，我使用::after来复制文本。我不确定这是否是最好的方法。我觉得很干净，但我想知道使用<divaria-hidden="true">是否对屏幕阅读器更安全？或可见性：隐藏；足够的？无论如何，这不是奇怪的部分。这是奇怪的部分：content:attr(data-replicated-value)"";因为我使用的是伪元素，它是从元素中取出数据属性并将内容呈现到具有额外空间的页面的行（这是奇怪的部分）。如果你不这样做，最终的结果会让人觉得“跳跃”。我不能说我完全理解它，但它似乎更尊重textarea和文本元素之间的环绕行为。如果你不想使用伪元素，嘿，我很好，只要注意弹跳行为。</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="网页（小程序）列表滑动事件渗透解决方案（可能是全网最简洁的解决方案）" href="/webqianduan/247888.html">网页（小程序）列表滑动事件渗透解决方案（可能是全网最简洁的解决方案）</a> </div> <div class="prev">下一篇：<a title="前端面试日常3+1——Day359" href="/webqianduan/247890.html">前端面试日常3+1——Day359</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>自动增长Textareas的最简洁技巧相关文章</code></div> <ul> <li><a href="/kejifunen/369418.html" target="_blank" title="5秒全自动修正“斜不直”投影真是好投影">5秒全自动修正“斜不直”投影真是好投影</a></li> <li><a href="/kejifunen/369368.html" target="_blank" title="自动驾驶初创公司Momenta获腾讯等机构投资，估值超10亿">自动驾驶初创公司Momenta获腾讯等机构投资，估值超10亿</a></li> <li><a href="/kejifunen/369358.html" target="_blank" title="拥抱人工智能，海信推出全球首款智能场景自动识别电视U8">拥抱人工智能，海信推出全球首款智能场景自动识别电视U8</a></li> <li><a href="/kejifunen/369353.html" target="_blank" title="车主泪流满面！ Model 3终于有了自动泊车功能">车主泪流满面！ Model 3终于有了自动泊车功能</a></li> <li><a href="/kejifunen/369235.html" target="_blank" title="MEMS 传感器正在快速增长，市场机遇与竞争齐飞">MEMS 传感器正在快速增长，市场机遇与竞争齐飞</a></li> <li><a href="/kejifunen/369072.html" target="_blank" title="经纬恒润科技前瞻技术负责人张大鹏进行了长达90分钟的深度演讲">经纬恒润科技前瞻技术负责人张大鹏进行了长达90分钟的深度演讲</a></li> <li><a href="/kejifunen/369066.html" target="_blank" title="Moto360可穿戴设备Q3销量再次增长">Moto360可穿戴设备Q3销量再次增长</a></li> <li><a href="/kejifunen/368974.html" target="_blank" title="深度分析！ 5G不是自动驾驶的“良药”，NVIDIA是">深度分析！ 5G不是自动驾驶的“良药”，NVIDIA是</a></li> <li><a href="/kejifunen/368912.html" target="_blank" title="蓝牙很快被引入到可穿戴设备中， 2018年芯片出货量将增长1">蓝牙很快被引入到可穿戴设备中， 2018年芯片出货量将增长1</a></li> <li><a href="/kejifunen/368898.html" target="_blank" title="蓝牙SIG发布2018《蓝牙市场最新资讯》！智能家居市场正以">蓝牙SIG发布2018《蓝牙市场最新资讯》！智能家居市场正以</a></li> <li><a href="/kejifunen/368874.html" target="_blank" title="融资新闻 -商汤科技获4.1亿美元融资，3年内获得5笔投资，">融资新闻 -商汤科技获4.1亿美元融资，3年内获得5笔投资，</a></li> <li><a href="/kejifunen/368748.html" target="_blank" title="VR进入疯狂增长期，必须面对三大问题">VR进入疯狂增长期，必须面对三大问题</a></li> <li><a href="/kejifunen/368732.html" target="_blank" title="摩尔定律不再适用！ AI算力3.43个月翻倍，6年增长30万">摩尔定律不再适用！ AI算力3.43个月翻倍，6年增长30万</a></li> <li><a href="/kejifunen/368673.html" target="_blank" title="沃尔沃将瑞典自动驾驶卡车带到751·DPARK兜了一圈">沃尔沃将瑞典自动驾驶卡车带到751·DPARK兜了一圈</a></li> <li><a href="/kejifunen/368669.html" target="_blank" title="耐磨又冷？ 2016年投资金额同比增长332%">耐磨又冷？ 2016年投资金额同比增长332%</a></li> <li><a href="/kejifunen/368589.html" target="_blank" title="800亿买票，30个月变身！采埃孚百年豪赌自动驾驶">800亿买票，30个月变身！采埃孚百年豪赌自动驾驶</a></li> <li><a href="/kejifunen/368581.html" target="_blank" title="Q2全球可穿戴设备出货量增长5.5%，小米第二、华为第四">Q2全球可穿戴设备出货量增长5.5%，小米第二、华为第四</a></li> <li><a href="/kejifunen/368560.html" target="_blank" title="华米科技新款699元腕带亮相，可自动监测心律失常">华米科技新款699元腕带亮相，可自动监测心律失常</a></li> <li><a href="/kejifunen/368544.html" target="_blank" title="自动驾驶的进退">自动驾驶的进退</a></li> <li><a href="/kejifunen/368402.html" target="_blank" title="奥维云网！ 2018H1净水器持续增长，线下渠道增速加快">奥维云网！ 2018H1净水器持续增长，线下渠道增速加快</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371253.html" title="这种可以骑乘并自动跟随人的移动机器人在海外收获了无数粉丝" target="_blank">这种可以骑乘并自动跟随人的移动机器人在海外收获了无数粉丝</a></li> <li><em>2</em><a href="/kejifunen/371175.html" title="自动驾驶！我希望你能带我去未来而不是死亡" target="_blank">自动驾驶！我希望你能带我去未来而不是死亡</a></li> <li><em>3</em><a href="/kejifunen/371150.html" title="国家发改委宣布家电将迎来新增长" target="_blank">国家发改委宣布家电将迎来新增长</a></li> <li><em>4</em><a href="/kejifunen/371131.html" title="Android P强力优化蓝牙耳机！自动记住多个设备的音量" target="_blank">Android P强力优化蓝牙耳机！自动记住多个设备的音量</a></li> <li><em>5</em><a href="/kejifunen/371022.html" title="独角兽新势力！不赚钱的自动驾驶汽车只是流氓 " target="_blank">独角兽新势力！不赚钱的自动驾驶汽车只是流氓 </a></li> <li><em>6</em><a href="/kejifunen/371019.html" title="随着年龄的增长，您是否同时近视和远视？美国大学研发“多焦点眼" target="_blank">随着年龄的增长，您是否同时近视和远视？美国大学研发“多焦点眼</a></li> <li><em>7</em><a href="/kejifunen/370919.html" title="钛技术！境内外双管齐下，出海会是下一个强劲增长点吗？ " target="_blank">钛技术！境内外双管齐下，出海会是下一个强劲增长点吗？ </a></li> <li><em>8</em><a href="/kejifunen/370886.html" title="阿里巴巴、小米增长迅速，跻身全球智能音箱出货量前五" target="_blank">阿里巴巴、小米增长迅速，跻身全球智能音箱出货量前五</a></li> <li><em>9</em><a href="/kejifunen/370708.html" title="解密可穿戴设备爆发式增长的阴影" target="_blank">解密可穿戴设备爆发式增长的阴影</a></li> <li><em>10</em><a href="/kejifunen/370634.html" title="自动驾驶汽车创业的窗口早已关闭，格局已然显现" target="_blank">自动驾驶汽车创业的窗口早已关闭，格局已然显现</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/370543.html" title="抖音群控抖音批量上传抖音流量抖音自动化" target="_blank">抖音群控抖音批量上传抖音流量抖音自动化</a></li> <li><em>2</em><a href="/kejifunen/370464.html" title="曲面电视的增长正在下降，如何实现逆袭" target="_blank">曲面电视的增长正在下降，如何实现逆袭</a></li> <li><em>3</em><a href="/kejifunen/370363.html" title="太棒了，这款智能鞋垫可以通过手机控制自动加热" target="_blank">太棒了，这款智能鞋垫可以通过手机控制自动加热</a></li> <li><em>4</em><a href="/kejifunen/370362.html" title="今年我国可穿戴设备市场规模预计增长70%以上" target="_blank">今年我国可穿戴设备市场规模预计增长70%以上</a></li> <li><em>5</em><a href="/kejifunen/370301.html" title="NATEDE智能净化器来了，它可以自动种植植物和浇水" target="_blank">NATEDE智能净化器来了，它可以自动种植植物和浇水</a></li> <li><em>6</em><a href="/kejifunen/370295.html" title="自动驾驶的前世今生（二）！它为何诞生？ " target="_blank">自动驾驶的前世今生（二）！它为何诞生？ </a></li> <li><em>7</em><a href="/kejifunen/370294.html" title="神奇皮鞋带你回到现实：手机穿上后会自动断网" target="_blank">神奇皮鞋带你回到现实：手机穿上后会自动断网</a></li> <li><em>8</em><a href="/kejifunen/370263.html" title="2017年虚拟现实硬件市场预计增长至247亿元" target="_blank">2017年虚拟现实硬件市场预计增长至247亿元</a></li> <li><em>9</em><a href="/kejifunen/370243.html" title="银湖发布2018年第二季度经营报告，移动交易额占比连续九个月" target="_blank">银湖发布2018年第二季度经营报告，移动交易额占比连续九个月</a></li> <li><em>10</em><a href="/kejifunen/370215.html" title="百度将实施国内首次L4级自动驾驶出租车测试" target="_blank">百度将实施国内首次L4级自动驾驶出租车测试</a></li> <li><em>11</em><a href="/kejifunen/370167.html" title="运营商创新业务助力4G智能手表快速增长" target="_blank">运营商创新业务助力4G智能手表快速增长</a></li> <li><em>12</em><a href="/kejifunen/370162.html" title="正式宣战！谷歌自动驾驶汽车来中国" target="_blank">正式宣战！谷歌自动驾驶汽车来中国</a></li> <li><em>13</em><a href="/kejifunen/370095.html" title="对话阿里巴巴人工智能实验室负责人千雪！国内智能音箱市场增长五" target="_blank">对话阿里巴巴人工智能实验室负责人千雪！国内智能音箱市场增长五</a></li> <li><em>14</em><a href="/kejifunen/370013.html" title="VAVA宠物机器人来了，实现远程互动、自动喂食" target="_blank">VAVA宠物机器人来了，实现远程互动、自动喂食</a></li> <li><em>15</em><a href="/kejifunen/369992.html" title="王小雷！从自动驾驶的角度看人工智能的能力和能力" target="_blank">王小雷！从自动驾驶的角度看人工智能的能力和能力</a></li> <li><em>16</em><a href="/kejifunen/369895.html" title="运动相机制造商GoPro公布2014年财务报告，较去年增长4" target="_blank">运动相机制造商GoPro公布2014年财务报告，较去年增长4</a></li> <li><em>17</em><a href="/kejifunen/369831.html" title="这些牛仔裤一年四季都可以穿，而且可以自动调节温度，非常方便" target="_blank">这些牛仔裤一年四季都可以穿，而且可以自动调节温度，非常方便</a></li> <li><em>18</em><a href="/kejifunen/369757.html" title="2020年全球可穿戴传感器市场将增长45.2%" target="_blank">2020年全球可穿戴传感器市场将增长45.2%</a></li> <li><em>19</em><a href="/kejifunen/369594.html" title="日本将在2020年允许高度自动驾驶汽车上路" target="_blank">日本将在2020年允许高度自动驾驶汽车上路</a></li> <li><em>20</em><a href="/kejifunen/369590.html" title="自动驾驶专利排行榜！ Waymo夺冠" target="_blank">自动驾驶专利排行榜！ Waymo夺冠</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>