网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

使用jquery让TextArea根据文字内容多少自适应增加行数

2021/4/2 22:11:13

使用jquery让TextArea根据文字内容多少自适应增加行数,实现非常简单,只用到了style.height和scrollTop属性,让我们看看具体的代码是如何实现的?代码共享$(function(){ $.fn.autoHeight = function(){ function autoHeight(elem){ elem.style.height …

使用jquery让TextArea根据文字内容多少自适应增加行数,实现非常简单,只用到了style.height和scrollTop属性,让我们看看具体的代码是如何实现的?

代码共享

$(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();    
})


页面中的textarea直接加属性就行


<textarea  autoHeight="true" readonly="readonly" > </textarea>


大家看了上面的实现代码是不是觉得非常简单呢,希望我们整理的内容对你有所帮助!

相关资讯

    暂无相关的数据...