textarea实现高度自适应

最新推荐文章于 2024-03-15 16:36:49 发布

原创最新推荐文章于 2024-03-15 16:36:49 发布 · 648 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用jQuery为页面中的textarea元素添加autoHeight属性，使其内容高度自适应。通过keyup事件实时调整高度，提升用户体验。

页面中添加属性：

页面中添加js

$(function(){
        $.fn.autoHeight = function(){    
        function autoHeight(elem){
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function(){
            autoHeight(this);
            $(this).on('keyup', function(){
                autoHeight(this);
            });
        });     
    }                
    $('textarea[autoHeight]').autoHeight();    
})