🌟textarea的高度自适应✨

发布时间：2025-03-23 14:05:48来源：

在日常开发中，我们经常需要让``标签随着内容增加自动调整高度，尤其是当文字行数达到一定值时。这不仅能提升用户体验，还能让页面更加整洁美观。那么，该如何实现呢？🧐</p><p>首先，通过监听`input`事件可以实时获取输入内容。接着，利用CSS中的`scrollHeight`属性动态设置`textarea`的高度。例如：</p><p>```css</p><p>textarea {</p><p>resize: none; / 禁止手动拖动 /</p><p>overflow: hidden;</p><p>}</p><p>```</p><p>同时，结合JavaScript代码：</p><p>```javascript</p><p>const textarea = document.querySelector('textarea');</p><p>textarea.addEventListener('input', () => {</p><p>textarea.style.height = 'auto'; // 恢复默认高度</p><p>textarea.style.height = `${textarea.scrollHeight}px`; // 动态调整高度</p><p>});</p><p>```</p><p>这样一来，当行数增多时，`textarea`会自动扩展高度，确保内容完整显示。💡</p><p>这样的功能不仅实用，还体现了对细节的关注，让交互更加流畅！👏</p>  <div class="clear"></div> <div id="SGOContentPage" class="SiteGeneralContentPage" style="margin-top:15px;"></div> <div class="article_footer clearfix"> <div class="fr tag"> 标签： </div> </div> <script> if (isMobile()){ document.write('<div style="text-align:center;margin-top:10px;margin-left:-12px;"><script>wap_show_sosuo();<\/script><\/div>'); } </script> <div class="content_banquan"> <p><span class="strong">免责声明：本文为转载，非本网原创内容，不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。</span></p> </div> </div> <script> if (isMobile()){ document.write('<div style="text-align:center;margin-left:-15px;"><script>wap_show_tag_under9();<\/script><\/div>'); } </script> <div class="listnews"> <div class="title1"><h3><a href="javascript:void(0)">相关阅读</a></h3></div> <ul> <li> <a href="http://www.tonnysoft.net/kj/202503/87425.html" target="_blank">🌟textarea的高度自适应✨</a> </li> <li> <a href="http://www.tonnysoft.net/kj/202503/87404.html" target="_blank">💻买电脑是去电脑城买比较好还是在网上买比较好？🤔</a> </li> <li> <a href="http://www.tonnysoft.net/kj/202503/87381.html" target="_blank">🌟 TextView里画世界 🌟 ReplacementSpan实践</a> </li> <li> <a href="http://www.tonnysoft.net/kj/202503/87368.html" target="_blank">💻华硕X450J：一款性价比之选🤔</a> </li> <li> <a href="http://www.tonnysoft.net/kj/202503/87342.html" target="_blank">_tf.placeholder()_csdn_1HAO的博客 😊</a> </li> <li> <a href="http://www.tonnysoft.net/kj/202503/87327.html" target="_blank">💻电脑硬盘损坏无法启动😢</a> </li> </ul> </div> <script> if (isMobile()){ document.write('<div style="text-align:center;margin-left:-15px;"><script>wap_show_artlist1();<\/script><\/div>'); } </script> </div>  <div class="right"> <div class="rdzt" style="margin-top:20px;"> <div class="title1"><h3><a href="http://m.tonnysoft.net/" target="_blank">精选资讯</a><div class="right_bg"></div></h3></div> <div class="rd_banner">  <a href="#" target="_blank" class="rd_pic"><img src="http://www.tonnysoft.net/statics/xz/images/s01.jpg" alt=""></a> <div class="rd_slide banner has-dots" id="b01" style="width: 300px; padding-top: 0px; height: 75px; overflow: hidden;"> <ul style="width: 200%; position: relative; overflow: hidden; left: -100%; height: 75px;"> <li style="width: 50%;"><a href="#" target="_blank"><img src="http://www.tonnysoft.net/statics/xz/images/s02.jpg" alt=""></a></li> <li style="width: 50%;"><a href="#" target="_blank"><img src="http://www.tonnysoft.net/statics/xz/images/s03.jpg" alt=""></a></li> </ul> </div> <script> $(document).ready(function(e) { $('#b01').unslider({ dots: true }); }); </script>  <div class="list_zt"> <ul>  <li><span class="dot"></span><a href="http://m.tonnysoft.net/jxzs/202503/87421.html" target="_blank">十年诀别</a></li> <li><span class="dot"></span><a href="http://m.tonnysoft.net/jxzs/202503/87416.html" target="_blank">斗牛黄渤：挑战与幽默的碰撞</a></li> <li><span class="dot"></span><a href="http://m.tonnysoft.net/jxzs/202503/87409.html" target="_blank">生在红旗下长在春风里——新时代</a></li> <li><span class="dot"></span><a href="http://m.tonnysoft.net/jxzs/202503/87341.html" target="_blank">老子名言新时代启示</a></li> <li><span class="dot"></span><a href="http://m.tonnysoft.net/jxzs/202503/87334.html" target="_blank">中国首批歼击机女飞行员：蓝天巾</a></li> </ul> </div> </div> </div>  <div class="cx_banner botborder noborder" style="padding-bottom:2px;margin-top:20px;"> <a href="#" target="_blank"><img src="http://www.tonnysoft.net/statics/xz/images/s05.jpg" alt=""></a> </div>  <div class="block_r botborder noborder"> <div class="title1"><h3><a href="http://news.tonnysoft.net/" target="_blank">精选要闻</a></h3></div> <div class="pic_box"> <div class="pic"><a href="http://news.tonnysoft.net/jxbk/202503/87406.html" target="_blank"><img src="http://www.tonnysoft.net/statics/images/nopic.gif" alt="到底大功率是指多少 😊"></a></div> <div class="bg"></div> <span><a href="http://news.tonnysoft.net/jxbk/202503/87406.html" target="_blank">到底大功率是指多少 😊</a></span> </div> <div class="txt"> <a href="http://news.tonnysoft.net/jxbk/202503/87383.html" target="_blank">😊 TextView和Button的区别 😊</a> <a href="http://news.tonnysoft.net/jxbk/202503/87370.html" target="_blank">📱小米会员自动续费取消指南✨</a> <a href="http://news.tonnysoft.net/jxbk/202503/87344.html" target="_blank">.tf.placeholder() 🌟</a> <a href="http://news.tonnysoft.net/jxbk/202503/87328.html" target="_blank">开启无线网卡硬件开关 🌐💡</a> </div> </div> <div class="block_r botborder noborder"> <div class="title1"><h3><a href="http://bbs.tonnysoft.net/" target="_blank">百科知识</a></h3></div> <div class="pic_box"> <div class="pic"><a href="http://bbs.tonnysoft.net/bkjx/202503/87408.html" target="_blank"><img src="http://www.tonnysoft.net/statics/images/nopic.gif" alt="🌟海信售后电话24小时人工电话📞"></a></div> <div class="bg"></div> <span><a href="http://bbs.tonnysoft.net/bkjx/202503/87408.html" target="_blank">🌟海信售后电话24小时人工电话📞</a></span> </div> <div class="txt"> <a href="http://bbs.tonnysoft.net/bkjx/202503/87384.html" target="_blank">🌟TextView的跑马灯效果 & Text</a> <a href="http://bbs.tonnysoft.net/bkjx/202503/87372.html" target="_blank">📱✨现在哪种手机自带存储空间大</a> <a href="http://bbs.tonnysoft.net/bkjx/202503/87345.html" target="_blank">🌟tf.placeholder 和 feed_dict</a> <a href="http://bbs.tonnysoft.net/bkjx/202503/87330.html" target="_blank">🌟怎么从对方QQ中删除自己？简单</a> </div> </div> <div class="block_r botborder noborder"> <div class="title1"><h3><a href="http://m.tonnysoft.net/jxzs/" target="_blank">精选知识</a></h3></div> <div class="pic_box"> <div class="pic"><a href="http://m.tonnysoft.net/jxzs/202503/87421.html" target="_blank"><img src="http://www.tonnysoft.net/statics/images/nopic.gif" alt="十年诀别"></a></div> <div class="bg"></div> <span><a href="http://m.tonnysoft.net/jxzs/202503/87421.html" target="_blank">十年诀别</a></span> </div> <div class="txt"> <a href="http://m.tonnysoft.net/jxzs/202503/87416.html" target="_blank">斗牛黄渤：挑战与幽默的碰撞</a> <a href="http://m.tonnysoft.net/jxzs/202503/87409.html" target="_blank">生在红旗下长在春风里——新时代</a> <a href="http://m.tonnysoft.net/jxzs/202503/87341.html" target="_blank">老子名言新时代启示</a> <a href="http://m.tonnysoft.net/jxzs/202503/87334.html" target="_blank">中国首批歼击机女飞行员：蓝天巾</a> </div> </div> <div class="block_r noborder"> <div class="title1"><h3><a href="javascript:void(0)" target="_blank">最新资讯</a></h3></div>  <div id="mooc">  <div id="moocBox" style="height:160px;"> <ul id="con1" class="txt">  <li><a href="http://www.tonnysoft.net/kj/202503/87425.html" target="_blank">🌟textarea的高度自适应✨</a></li> <li><a href="http://www.tonnysoft.net/dians/202503/87422.html" target="_blank">🌟微淘文案怎么写？快来抄作业啦</a></li> <li><a href="http://m.tonnysoft.net/jxzs/202503/87421.html" target="_blank">十年诀别</a></li> <li><a href="http://www.tonnysoft.net/kx/202503/87420.html" target="_blank">皇室婚纱</a></li> <li><a href="http://www.tonnysoft.net/fc/202503/87419.html" target="_blank">🌟嵌入式衣柜怎么样？打造理想家</a></li> <li><a href="http://www.tonnysoft.net/dians/202503/87418.html" target="_blank">🔥电气火灾监控系统厂家💡</a></li> <li><a href="http://www.tonnysoft.net/xiaoshuo/202503/87417.html" target="_blank">命中注定爱上你</a></li> <li><a href="http://m.tonnysoft.net/jxzs/202503/87416.html" target="_blank">斗牛黄渤：挑战与幽默的碰撞</a></li> <li><a href="http://www.tonnysoft.net/falv/202503/87415.html" target="_blank">📚✨个体商户税收定期定额征收是</a></li> <li><a href="http://www.tonnysoft.net/kx/202503/87414.html" target="_blank">湖南科技学院图书馆</a></li> <li><a href="http://www.tonnysoft.net/lv/202503/87413.html" target="_blank">🌸徐汇区天主教堂免费开放啦！注</a></li> <li><a href="http://www.tonnysoft.net/meishi/202503/87412.html" target="_blank">孩子早餐吃什么长高？长高食谱推</a></li> </ul> <ul id="con2" class="txt"></ul> </div>  </div>  <script type="text/javascript"> var area = document.getElementById('moocBox'); var con1 = document.getElementById('con1'); var con2 = document.getElementById('con2'); var speed = 50; area.scrollTop = 0; con2.innerHTML = con1.innerHTML; function scrollUp(){ if(area.scrollTop >= con1.scrollHeight) { area.scrollTop = 0; }else{ area.scrollTop ++; console.log(area.scrollTop); } } var myScroll = setInterval("scrollUp()",speed); area.onmouseover = function(){ clearInterval(myScroll); } area.onmouseout = function(){ myScroll = setInterval("scrollUp()",speed); } </script> </div> </div>  </div> </div>  <div class="footer"> <div class="info"> <h1><a href="http://www.tonnysoft.net"><img src="http://www.tonnysoft.net/statics/xz/picture/logo_s.jpg" /></a></h1> <div class="txt"> <p> <span><a href="http://www.tonnysoft.net/about.html" target="_blank">关于我们</a></span><span>|</span> <span><a href="http://www.tonnysoft.net/lxfs.html" target="_blank">联系方式</a></span><span>|</span> <span><a href="http://www.tonnysoft.net/bqsm.html" target="_blank">版权声明</a></span><span>|</span> <span><a href="http://www.tonnysoft.net/mzsm.html" target="_blank">免责声明</a></span><span>|</span> </p> <p>AI智能网版权所有，未经书面授权禁止使用</p> <p class="arial">AI智能网主办版权所有：AI智能网站 Copyright © 2007-2025 by http://www.tonnysoft.net All Rights Reserved</p> <p class="arial"><a href="http://www.tonnysoft.net/ditu.html" target="_blank" >网站地图</a> | <a href="http://www.tonnysoft.net/sitemaps.xml" target="_blank">百度地图</a> | <a href="http://www.tonnysoft.net/sitemaps_360_all.xml" target="_blank">360地图</a> | <a href="http://www.tonnysoft.net/jrgx" target="_blank">今日更新</a></p> </div> </div> </div> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?78ae81e5d6606fcf4bdfbf512f47af90db9174cabeac585af43794e972fd8fcd65e0a2ada1d5e86b11e7de7c1a83287d04743a02fd1ee8dd8558a8cad50e91cb354f8c6f3f78e5fd97613c481f678e6d"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script>  </body> </html>