div模拟textarea自适应高度-DTBelieve

来源：化拓教育网
　　之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用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></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.huatuo9.cn/mobile/detail_left.js"></script>
            <script type="text/javascript" src="https://jss.huatuo9.cn/mobile/detail_gg2.js"></script>
            
    </div><div on="click:showmore01.toggle" data-closetext="收起全文" class="mip-showmore-btn">显示全文</div>
    <div class="ppo_prev">
        
        
    </div>
</div>


<script type="text/javascript" src="https://jss.huatuo9.cn/mobile/detail_foot.js"></script>
        <script type="text/javascript" src="https://jss.huatuo9.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.huatuo9.cn/mobile/share_cebian_gg2.js"></script>
<script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_rmtj.js"></script>
            <script type="text/javascript" src="https://jss.huatuo6.com/pc/tj_foot4.js"></script><footer class="map-footer">
  <!-- <p class="mind_e"><img src="images/logo.png" alt=""></p> -->
  <p class="copyright">
 Copyright © 2019-<span class="currentYear"></span> huatuo9.cn 版权所有 <br>
 <a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备2023008801号-1</a></p>
<script type="text/javascript">
const currentYear = new Date().getFullYear();
$('.currentYear').html(currentYear)
</script>
</footer>
</body>
</html>
全部频道

div模拟textarea自适应高度-DTBelieve
