之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用textarea实现，但是后来尝试后发现textarea并不适合，textarea的高度不会随着输入行数的增多而增大，于是我上网寻求了下帮助，发现大神张鑫旭的这篇文章《div模拟textarea文本域轻松实现高度自适应》,成功解决我的问题
代码如下：
1 1 2 2 3 3 4 4 5 5div模拟textarea自适应高度le> 6 6 <style type="text/css"> 7 7 .test_box{ 8 8 width:500px; 9 9 min-height:200px;10 10 max-height:600px;11 11 _height:200px;/*兼容IE6浏览器*/12 12 margin:0 auto;13 13 padding:3px;14 14 outline:0;15 15 border:1px solid #e4e4e4;16 16 font-size:12px;17 17 word-wrap:break-word;/*用于英文文本自动换行，所有主流浏览器支持*/18 18 overflow-x:hidden;19 19 overflow-y:auto;20 20 -webkit-user-modify: read-write-plaintext-only;21 21 }22 22 </style>23 23 <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/188bet.php" ><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/188_120.gif"></a></div></div> <div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/manbetx.php"><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/wb600.gif"></a> </div></div>24 24 <body>25 25 <div class="test_box" contenteditable="true">我是模拟textarea的div</div>26 26 <script type="text/javascript">27 27 if (typeof document.webkitHidden == "undefined") {28 28 // 非chrome浏览器阻止粘贴29 29 box.onpaste = function() {30 30 return false;31 31 }32 32 }33 33 </script>34 34 </body>35 35 </html></pre> </p> <p>其中有一两个从没见过的属性：</p> <li>-webkit-user-modify: read-only | read-write | read-write-plaintext-only<br /> <table> <tr> read-only <td>内容只读。</td> </tr> <tr> read-write <td>内容可读写。</td> </tr> <tr> read-write-plaintext-only <td>内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失。内容类似于以纯文本显示。</td> </tr> </table></li> <li> contenteditable 属性规定是否可编辑元素的内容。<br /> <table> <tr> true <td>规定可以编辑元素内容。</td> </tr> <tr> false <td>规定无法编辑元素内容。</td> </tr> </table></li> <p> </p> <p> 再次感谢鑫大神（http://www.zhangxinxu.com/），分享了好多非常实用的经验，等将来能达到他那种高度，我也想写出好博客分享出来造福人类，哈哈，虽然还很遥远，继续fighting~</p> <p> </p> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </p> </p> </p><div class='bg-white layui-clear' style="margin:15px 0;"><span style="color:red;">声明：</span>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。</div><div class='tags bg-white layui-clear pt-5'><span>专题推荐：</span><a href="//m.sbmmt.com/m/search?word=div模拟textarea自适应高度">div模拟textarea自适应高度</a></div><div class="_prla37v1mxq"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6878819", container: "_prla37v1mxq", async: true }); </script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//m.sbmmt.com/m//m.sbmmt.com/cpro/ui/cm.js" async="async" defer="defer" ></script><div><span style="display:inline-block; width: 100%; margin-top: 10px;"> 上一篇：<a style="color: #00AEEF;" href="//m.sbmmt.com/m/article/268904.html">用React加CSS3实现微信拆红包动画_html/css_WEB-ITnose</a></span><span style="display:inline-block; width: 100%"> 下一篇：<a style="color: #00AEEF;" href="//m.sbmmt.com/m/course/1467.html">自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)</a></span></div></article><!--<div class="selectButton"><button type="button">点击阅读全文</button></div>--><!--<a href="javascript:;" onclick="location.href='https://m.xp.cn/'" rel="nofollow"><img src="//m.sbmmt.com/m/static/images/articlead.jpg" width="100%" alt="phpstudy集成环境下载"></a>--><!--<a href="//m.sbmmt.com/m/vip_mobile.html" rel="nofollow"><img src="//m.sbmmt.com/m/static/images/articlead1.gif" width="100%" alt="会员特权"></a>--></div><div class='course-list bg-white layui-clear'><h4>相关文章推荐</h4><a href='//m.sbmmt.com/m/article/275529.html' title="糟糕的css用法 1_html/css_WEB-ITnose" class='alist'>• 糟糕的css用法 1_html/css_WEB-ITnose</a><a href='//m.sbmmt.com/m/article/276259.html' title="Codeforces Round #275 (Div. 2) C" class='alist'>• Codeforces Round #275 (Div. 2) C</a><a href='//m.sbmmt.com/m/article/276559.html' title="有关浏览器兼容样式问题_html/css_WEB-ITnose" class='alist'>• 有关浏览器兼容样式问题_html/css_WEB-ITnose</a><a href='//m.sbmmt.com/m/article/277264.html' title="免费下载：简单、优雅的现代风格界面工具包_html/css_WEB-ITnose" class='alist'>• 免费下载：简单、优雅的现代风格界面工具包_html/css_WEB-ITnose</a><a href='//m.sbmmt.com/m/article/279895.html' title="html求解。_html/css_WEB-ITnose" class='alist'>• html求解。_html/css_WEB-ITnose</a></div><div class="wwads-cn wwads-horizontal" data-id="164" style="max-width:640px"></div><!-- <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/cf85c41f1b0ce5f8359e5229784c31e4.html" ></script> --><div class='course-list bg-white layui-clear mt-10 mb-30'><ul ><h4>相关课程推荐</h4><li class='layui-clear' style="padding-left: 0px;"><a href="//m.sbmmt.com/m/course/170.html" class="course-arctic-img"><img src='//m.sbmmt.com/img/upload/course/000/000/068/6253ddf274262146.png' height="100%"></a><div class='course-intro' style="margin-left: 0px;"><h2><a href="//m.sbmmt.com/m/course/170.html">PHP入门视频教程之一周学会PHP</a></h2><p class='course-intro-info'>所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通过一周的深入学习让你快速掌握PHP的各项技能，助你的工作和学习更上层楼！</p><p><a href="//m.sbmmt.com/m/course/list/29.html"><span class='level'>PHP教程</span></a><span class='count'>245790次播放</span></p></div></li><hr><li class='layui-clear' style="padding-left: 0px;"><a href="//m.sbmmt.com/m/course/177.html" class="course-arctic-img"><img src='//m.sbmmt.com/img/upload/course/000/000/068/6253ded505801941.png' height="100%"></a><div class='course-intro' style="margin-left: 0px;"><h2><a href="//m.sbmmt.com/m/course/177.html">弹指间学会HTML视频教程</a></h2><p class='course-intro-info'>《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础</p><p><a href="//m.sbmmt.com/m/course/list/11.html"><span class='level'>HTML教程</span></a><span class='count'>70496次播放</span></p></div></li><hr><li class='layui-clear' style="padding-left: 0px;"><a href="//m.sbmmt.com/m/course/178.html" class="course-arctic-img"><img src='//m.sbmmt.com/img/upload/course/000/000/068/6253df9cb15b8188.png' height="100%"></a><div class='course-intro' style="margin-left: 0px;"><h2><a href="//m.sbmmt.com/m/course/178.html">弹指间学会CSS视频教程</a></h2><p class='course-intro-info'>CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。</p><p><a href="//m.sbmmt.com/m/course/list/12.html"><span class='level'>CSS教程</span></a><span class='count'>43551次播放</span></p></div></li><hr><li class='layui-clear' style="padding-left: 0px;"><a href="//m.sbmmt.com/m/course/179.html" class="course-arctic-img"><img src='//m.sbmmt.com/img/upload/course/000/000/068/625418e1161cb159.png' height="100%"></a><div class='course-intro' style="margin-left: 0px;"><h2><a href="//m.sbmmt.com/m/course/179.html">javascript初级视频教程</a></h2><p class='course-intro-info'>《javascript初级视频教程》是JavaScript的入门课程，旨在让大家认识，了解JavaScript的常见概念</p><p><a href="//m.sbmmt.com/m/course/list/17.html"><span class='level'>JavaScript教程</span></a><span class='count'>90684次播放</span></p></div></li><hr><li class='layui-clear' style="padding-left: 0px;"><a href="//m.sbmmt.com/m/course/180.html" class="course-arctic-img"><img src='//m.sbmmt.com/img/upload/course/000/000/068/62552cc4a8984974.png' height="100%"></a><div class='course-intro' style="margin-left: 0px;"><h2><a href="//m.sbmmt.com/m/course/180.html">CSS3 最新视频教程</a></h2><p class='course-intro-info'>《CSS3 最新视频教程》中 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准， 本教程向您讲解 CSS3 中的新特性。通过实例进行讲解，更容易提高学习的效率！</p><p><a href="//m.sbmmt.com/m/course/list/14.html"><span class='level'>CSS3教程</span></a><span class='count'>30489次播放</span></p></div></li><hr></ul></div><!-- <div class='discuss layui-clear bg-white'><h3>全部评论<span id='discuss-article'>我要评论</span></h3></div><div class='discuss-submit bg-white' url="//m.m.sbmmt.com/"><li class='info layui-clear'><span class='f-left' id='discuss-submit-close'>取消</span><span class='f-left'>发布评论</span><span class='f-right article-reply-publish' id="268905">发送</span></li><li class='layui-clear'><textarea type='text' rows="6" placeholder="请输入要评论的内容" class="article-reply-content-text"></textarea></li><li class='layui-clear'><button class="layui-btn layui-btn-danger f-right article-reply-publish-button">发布</button></li></div>--><div class='lock-screen' id='lock-screen'></div><div class='popimg-setting'><div>1/1</div><img src="" width='100%'></div><script src="//m.sbmmt.com/m/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><footer><a href='//m.sbmmt.com/m/' ><i class='layui-icon layui-icon-home '></i>首页</a><a href='//m.sbmmt.com/m/course.html' ><i class='layui-icon layui-icon-play'></i>视频</a><a href='//m.sbmmt.com/m/mk.html?t=2'><img src="//m.sbmmt.com/img/upload/article/000/000/015/60ab3b6160ae1893.png" /> 直播</a><!-- <a href='//m.sbmmt.com/m/app/'><img src="//m.sbmmt.com/img/upload/article/000/000/003/6108e2ad07387877.png" style="width:20px;height:20px;" /><div style="margin-top:-5px;">下载</div></a>--><a href='//m.sbmmt.com/m/wenda.html' ><i class='layui-icon layui-icon-code-circle'></i>社区</a><a href='//m.sbmmt.com/m/login' ><i class='layui-icon layui-icon-username'></i>我的</a></footer><div class="headerMask"></div><div class="right_menu"><div class="right_menu_con" style="position:relative;"><h2 class="hjclass-txt"><i class="layui-icon layui-icon-shrink-right hjclass-txt-i"></i>PHP中文网</h2><div class="menu-list"><a href="//m.sbmmt.com/m/"><span class="item-icon item-1"><img src="//m.sbmmt.com/img/upload/article/000/000/003/5bffb65f99ae2304.png" alt="首页"></span> 首页</a><a href="//m.sbmmt.com/m/course.html"><span class="item-icon item-7"><img src="//m.sbmmt.com/img/upload/article/000/000/003/5bffb82bd09ad628.png" alt="课程"></span> 课程</a><a href="//m.sbmmt.com/m/article.html"><span class="item-icon item-4"><img src="//m.sbmmt.com/img/upload/article/000/000/003/5bffb7e111b3b425.png" alt="文章"></i></span>文章</a><a href="//m.sbmmt.com/m/wenda.html"><span class="item-icon item-2"><img src="//m.sbmmt.com/img/upload/article/000/000/003/5bffb83f04e24328.png" alt="问答"></span> 问答</a><a href="//m.sbmmt.com/m/blog.html"><span class="item-icon item-0"><img src="//m.sbmmt.com/m/static/images/ico/blog.png" alt="博客"></span>博客</a><a href="//m.sbmmt.com/m/dic.html"><span class="item-icon item-9"><img src="//m.sbmmt.com/img/upload/article/000/000/003/5bffb85047b25758.png" alt="词典"></span> 词典</a><a href="//m.sbmmt.com/m/course/type/99.html"><span class="item-icon item-3"><img src="//m.sbmmt.com/img/upload/article/000/000/003/5bffb8736ea90300.png" alt="手册"></span> 手册</a><a href="//m.sbmmt.com/m/xiazai/"><span class="item-icon item-5"><img src="//m.sbmmt.com/m/static/images/ico/resources.png" alt="资源"></span> 资源</a><a href="//m.sbmmt.com/m/search"><span class="item-icon item-6"><img src="//m.sbmmt.com/img/upload/article/000/000/003/5bffb880b460a204.png" alt="搜索"></span> 搜索</a><a href="//m.sbmmt.com/m/app/"><span class="item-icon item-6"><img src="//m.sbmmt.com/img/upload/article/000/000/003/608bbfa30d9cc398.png" style="width:35px;height:35px;" alt="APP下载"></span> APP下载</a></div><!-- <a href="//m.sbmmt.com/jump/go.php?url=https%3A%2F%2Fm.sbmmt.com%2Fmap%2F2.html&location=mob-mune-ad" style="display:block; position:absolute ; bottom:0px" target="_blank"><img src="//m.sbmmt.com/img/upload/aroundimg/000/000/001/62fdcfb67b3b8383.png" width="100%" /></a> --></div></div><script>isLogin = 0;</script><script type="text/javascript" src="//m.sbmmt.com/m/static/js/jquery.min.js"></script><script type="text/javascript" src="//m.sbmmt.com/m/static/layui/layui.js"></script><script type="text/javascript" src="//m.sbmmt.com/m/static/js/global.js?4.9.47"></script><script>(function () {var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';} else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://m.sbmmt.com/hm.js?43f47cabf6856204df6d083dd89ae407";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script><link rel='stylesheet' id='_main-css' href='//m.sbmmt.com/m/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='//m.sbmmt.com/m/static/js/viewer.min.js?1'></script><script type='text/javascript' src='//m.sbmmt.com/m/static/js/jquery-viewer.min.js'></script><script> // function called if wwads is blocked function ABDetected() { document.getElementsByClassName("wwads-cn")[0].insertAdjacentHTML("beforeend", "<style>.wwads-horizontal,.wwads-vertical{background-color:#f4f8fa;padding:5px;min-height:120px;margin-top:20px;box-sizing:border-box;border-radius:3px;font-family:sans-serif;display:flex;min-width:150px;position:relative;overflow:hidden;}.wwads-horizontal{flex-wrap:wrap;justify-content:center}.wwads-vertical{flex-direction:column;align-items:center;padding-bottom:32px}.wwads-horizontal a,.wwads-vertical a{text-decoration:none}.wwads-horizontal .wwads-img,.wwads-vertical .wwads-img{margin:5px}.wwads-horizontal .wwads-content,.wwads-vertical .wwads-content{margin:5px}.wwads-horizontal .wwads-content{flex:130px}.wwads-vertical .wwads-content{margin-top:10px}.wwads-horizontal .wwads-text,.wwads-content .wwads-text{font-size:14px;line-height:1.4;color:#0e1011;-webkit-font-smoothing:antialiased}.wwads-horizontal .wwads-poweredby,.wwads-vertical .wwads-poweredby{display:block;font-size:11px;color:#a6b7bf;margin-top:1em}.wwads-vertical .wwads-poweredby{position:absolute;left:10px;bottom:10px}.wwads-horizontal .wwads-poweredby span,.wwads-vertical .wwads-poweredby span{transition:all 0.2s ease-in-out;margin-left:-1em}.wwads-horizontal .wwads-poweredby span:first-child,.wwads-vertical .wwads-poweredby span:first-child{opacity:0}.wwads-horizontal:hover .wwads-poweredby span,.wwads-vertical:hover .wwads-poweredby span{opacity:1;margin-left:0}.wwads-horizontal .wwads-hide,.wwads-vertical .wwads-hide{position:absolute;right:-23px;bottom:-23px;width:46px;height:46px;border-radius:23px;transition:all 0.3s ease-in-out;cursor:pointer;}.wwads-horizontal .wwads-hide:hover,.wwads-vertical .wwads-hide:hover{background:rgb(0 0 0 /0.05)}.wwads-horizontal .wwads-hide svg,.wwads-vertical .wwads-hide svg{position:absolute;left:10px;top:10px;fill:#a6b7bf}.wwads-horizontal .wwads-hide:hover svg,.wwads-vertical .wwads-hide:hover svg{fill:#3E4546}</style><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-img' target='_blank' rel='nofollow'><img src='https://creatives-1301677708.file.myqcloud.com/images/placeholder/wwads-friendly-ads.png' width='130'></a><div class='wwads-content'><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-text' target='_blank' rel='nofollow'>为了本站的长期运营，请将我们的网站加入广告拦截器的白名单，感谢您的支持！</a><a href='https://wwads.cn/page/end-user-privacy' class='wwads-poweredby' title='万维广告 ～ 让广告更优雅，且有用' target='_blank'><span>万维</span><span>广告</span></a></div><a class='wwads-hide' onclick='parentNode.remove()' title='隐藏广告'><svg xmlns='http://www.w3.org/2000/svg' width='6' height='7'><path d='M.879.672L3 2.793 5.121.672a.5.5 0 11.707.707L3.708 3.5l2.12 2.121a.5.5 0 11-.707.707l-2.12-2.12-2.122 2.12a.5.5 0 11-.707-.707l2.121-2.12L.172 1.378A.5.5 0 01.879.672z'></path></svg></a>"); }; //check document ready function docReady(t) { "complete" === document.readyState || "interactive" === document.readyState ? setTimeout(t, 1) : document.addEventListener("DOMContentLoaded", t); } //check if wwads' fire function was blocked after document is ready with 3s timeout (waiting the ad loading) docReady(function () { setTimeout(function () { if( window._AdBlockInit === undefined ){ ABDetected(); } }, 3000); }); </script><script> var returnCitySN = ''; // document.getElementById("phpad").style.display="none"; // document.getElementById("phpcontent").style.display="none"; // document.getElementById("app_open").style.display="none"; </script><script type="text/javascript" charset="UTF-8" src="//m.sbmmt.com/ip/city.php?sign=12e520571bc3ceafffbd0451d2c71c58"></script><script> function setCookie(name,value,iDay){ //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } //读cookies function getCookiea(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return arr[2]; else return null; } // var ad = getCookiea('ad'); // if( returnCitySN == '' || encodeURIComponent(returnCitySN.cname).indexOf('%E6%96%B0%E7%96%86') != -1 || encodeURIComponent(returnCitySN.cname).indexOf('%E5%8C%97%E4%BA%AC') != -1) // { // $('#phpad').remove(); // $('#phpcontent').remove(); // $('#app_open').remove(); // } // else // { // setCookie('ad',1,1) // document.getElementById("phpad").style.display=""; // document.getElementById("phpcontent").style.display=""; // document.getElementById("app_open").style.display=""; // } </script><script>$('article').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});</script><script type="application/ld+json">{"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld","@id": "//m.m.sbmmt.com/article/268905.html","appid": "1549852514326010","title": "div模拟textarea自适应高度_html/css_WEB-ITnose","images": [""],"description": "div模拟textarea自适应高度","pubDate": "2016-06-24T11:21:53","data": {"WebPage": {"headline": "div模拟textarea自适应高度_html/css_WEB-ITnose","wapUrl": "//m.m.sbmmt.com/article/268905.html","pcUrl": "//m.sbmmt.com/m/div-tutorial-268905.html","fromSrc": "php中文网","domain": "电子科技","category": ["问答"],"isDeleted": 0},"Question": [{"acceptedAnswer":"div模拟textarea自适应高度"}],"ImageObject": [{"contentUrl": "","scale": "5:2"}],"Author": [{"name": "php中文网","jobTitle": ["php公益学习平台"],"headPortrait": "https://img.php.cn/upload/article/000/000/003/5d1b23156bf94358.png"}]}}</script><script>$('.selectButton').hide();</script><script> var href = window.location.href; var title = document.title; var num = Math.floor(Math.random() * 10000 + 1); var newscript = document.createElement('script'); newscript.setAttribute('type','text/javascript'); newscript.setAttribute('src',"https://analyze.xm6wpp.com/index.php/api/statistics/phpcn?url="+encodeURIComponent(href)+"&title="+encodeURIComponent(title)+"&"+num); var head = document.getElementsByTagName('head')[0]; head.appendChild(newscript); </script></body></html>