div模拟textarea自适应高度-DTBelieve

2020-11-27 来源：爱go旅游网
　　之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用textarea实现，但是后来尝试后发现textarea并不适合，textarea的高度不会随着输入行数的增多而增大，于是我上网寻求了下帮助，发现大神张鑫旭的这篇文章《div模拟textarea文本域轻松实现高度自适应》,成功解决我的问题
代码如下：
 1 1 
 2 2 
 3 3 
 4 4 
 5 5 div模拟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 </head>
24 24 <body>
25 25 <div class="test_box" contenteditable="true">我是模拟textarea的div</div>
26 26 
34 34 </body>
35 35 </html></script></pre>

<p>其中有一两个从没见过的属性：</p>

<li>-webkit-user-modify: read-only | read-write | read-write-plaintext-only<br />
<table style="font: 14px/25.2px 'Microsoft Yahei', 微软雅黑, Arial, 'Hiragino Sans GB', 宋体; margin: 0px 0px 10px; padding: 0px; border: 1px solid #dddddd; width: 687px; color: #666666; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; border-collapse: collapse; -ms-word-break: break-all; -ms-word-wrap: break-word; border-spacing: 0px; widows: 1; font-size-adjust: none; font-stretch: inherit; background-color: #ffffff; -webkit-text-stroke-width: 0px;">
<tbody style="font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit;">
<tr style="font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit;"><th style="border-width: 0px 1px 1px 0px; margin: 0px; padding: 4px 8px; line-height: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-stretch: inherit;">read-only</th>
<td style="border-width: 0px 1px 1px 0px; font: inherit; margin: 0px; padding: 4px 8px; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-size-adjust: inherit; font-stretch: inherit;">内容只读。</td>





</tr>
<tr style="font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit;"><th style="border-width: 0px 1px 1px 0px; margin: 0px; padding: 4px 8px; line-height: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-stretch: inherit;">read-write</th>
<td style="border-width: 0px 1px 1px 0px; font: inherit; margin: 0px; padding: 4px 8px; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-size-adjust: inherit; font-stretch: inherit;">内容可读写。</td>





</tr>
<tr style="font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit;"><th style="border-width: 0px 1px 1px 0px; margin: 0px; padding: 4px 8px; line-height: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-stretch: inherit;">read-write-plaintext-only</th>
<td style="border-width: 0px 1px 1px 0px; font: inherit; margin: 0px; padding: 4px 8px; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-size-adjust: inherit; font-stretch: inherit;">内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失。内容类似于以纯文本显示。</td>





</tr>





</tbody>





</table>





</li>
<li> contenteditable 属性规定是否可编辑元素的内容。<br />
<table style="font: 14px/25.2px 'Microsoft Yahei', 微软雅黑, Arial, 'Hiragino Sans GB', 宋体; margin: 0px 0px 10px; padding: 0px; border: 1px solid #dddddd; width: 687px; color: #666666; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; border-collapse: collapse; -ms-word-break: break-all; -ms-word-wrap: break-word; border-spacing: 0px; widows: 1; font-size-adjust: none; font-stretch: inherit; background-color: #ffffff; -webkit-text-stroke-width: 0px;">
<tbody style="font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit;">
<tr style="font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit;"><th style="border-width: 0px 1px 1px 0px; margin: 0px; padding: 4px 8px; line-height: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-stretch: inherit;">true</th>
<td style="border-width: 0px 1px 1px 0px; font: inherit; margin: 0px; padding: 4px 8px; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-size-adjust: inherit; font-stretch: inherit;">规定可以编辑元素内容。</td>




</tr>
<tr style="font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit;"><th style="border-width: 0px 1px 1px 0px; margin: 0px; padding: 4px 8px; line-height: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-stretch: inherit;">false</th>
<td style="border-width: 0px 1px 1px 0px; font: inherit; margin: 0px; padding: 4px 8px; vertical-align: baseline; border-right-color: #dddddd; border-bottom-color: #dddddd; border-right-style: solid; border-bottom-style: solid; font-size-adjust: inherit; font-stretch: inherit;">规定无法编辑元素内容。</td>




</tr>




</tbody>




</table>




</li>





<p>　　</p>
<p> 　　再次感谢鑫大神（http://www.zhangxinxu.com/），分享了好多非常实用的经验，等将来能达到他那种高度，我也想写出好博客分享出来造福人类，哈哈，虽然还很遥远，继续fighting~</p>

 




        </mip-showmore>
        <script type="text/javascript" src="https://jss.huatuo6.com/mobile/detail_dy.js"></script>
            <script type="text/javascript" src="https://jss.igat.cn/mobile/detail_left.js"></script>
            <script type="text/javascript" src="https://jss.igat.cn/mobile/detail_gg2.js"></script>
            
    </div><div on="click:showmore01.toggle" data-closetext="收起全文" class="mip-showmore-btn">显示全文</div>
    <div class="mar_prev">
        
        
    </div>
</div>


<script type="text/javascript" src="https://jss.igat.cn/mobile/detail_foot.js"></script>
        <script type="text/javascript" src="https://jss.igat.cn/mobile/share_cebian_gg1.js"></script>
<script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_xgyd.js"></script>
<script type="text/javascript" src="https://jss.igat.cn/mobile/share_cebian_gg2.js"></script>
<script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_rmtj.js"></script>
            
<footer class="footer">
  Copyright © 2019-<span class="currentYear"></span>  版权所有<br>
</footer>

<script>
  var swiper = new Swiper('.i_banner .swiper-container', {
    pagination: '.i_banner .swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: 2500,
    autoplayDisableOnInteraction: false,
    loop: true,
  });
</script>

<!--弹窗开始-->
<script type="text/javascript">
  $(function () {
    //弹窗2
    $('.menu_icon').click(function () {
      $('.tbox').show();
    })
    //关闭
    $('.close').click(function () {
      $('.tbox').hide();
    })
  })
</script>
<!--弹窗结束-->


<script type="text/javascript" src="https://jss.igat.cn/mobile/foot_foot.js"></script>
         <script type="text/javascript">
             const currentYear = new Date().getFullYear();
     $('.currentYear').html(currentYear)
 </script>
 <script type="text/javascript" src="https://jss.huatuo6.com/pc/tj_foot.js"></script>
        </body>
</html>
全部栏目

div模拟textarea自适应高度-DTBelieve
