textarea高度自适应,textarea随着内容高度变化

浏览: 1,290次 日期:2018年01月14日 17:05:06 作者:青格勒

有时候我们需要textarea的高度随着内容的多少去自适应的变化,今天我使用了JS原生和JQ写了一个textarea的高度随着他的内容高度变化的代码,希望能帮上忙。

废话不多说直接贴代码:


<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
    textarea{ width:500px; margin:20px auto; padding:0; font-size:14px; color:#333; font-family:"Microsoft YaHei"; line-height:28px;}
</style>
<div>
<textarea id="textarea">
    CGLweb前端  http://cenggel.com/
    青格勒前端博客  http://cenggel.com/
    CGLweb前端  http://cenggel.com/
    青格勒前端博客  http://cenggel.com/
</textarea>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var text_box = $('#textarea');
        function  cglHeight() {
            var cglTextHeight = text_box.get(0).scrollHeight;
            text_box.css('height',cglTextHeight+'px');
            console.log(cglTextHeight);
        };
        cglHeight();
        text_box.on('keyup mousedown mouseup focus blur',function(){
            cglHeight();
        });
    });
</script>

如果对你有帮助,别了分享哦。

文章链接:http://cenggel.com/js/46.html

版权声明:文章《textarea高度自适应,textarea随着内容高度变化》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注