jquery处理高度自适应的textarea

1 篇文章 0 订阅
1 篇文章 0 订阅

废会不多说,直接上代码,留着日后开发可以使用到。

HTML代码:

<textarea id="textarea">
    当时间来到2021年5月12日,这一天,心绪将刮去覆盖在日常之上的层层琐屑,唤起那些隐藏于心的怀念。
</textarea>

JS代码:

采用插件的方式:

<script>
(function($){
    $.fn.autoTextarea = function(options) {
        var defaults={
            maxHeight:null,
            minHeight:$(this).height() * 12
        };
        var opts = $.extend({},defaults,options);
        return $(this).each(function() {
            $(this).bind("paste cut keydown keyup focus blur",function(){
                var height,style=this.style;
                this.style.height = opts.minHeight + 'px';
                if (this.scrollHeight > opts.minHeight) {
                    if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
                        height = opts.maxHeight;
                        style.overflowY = 'scroll';
                    } else {
                        height = this.scrollHeight;
                        style.overflowY = 'hidden';
                    }
                    style.height = height + 'px';
                }
            }).trigger("blur");
        });
    };
})(jQuery);
</script>

使用:

<script>

$("#textarea").autoTextarea({
  maxHeight:320,
  minHeight:80
});

</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值