jquery 控制textArea 随文本增加而变高

最新推荐文章于 2024-04-18 14:46:56 发布

转载最新推荐文章于 2024-04-18 14:46:56 发布 · 2.9k 阅读

Jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一款用于自动调整文本域高度的jQuery插件，可根据文本内容动态改变高度，支持设定最大及最小高度，并在内容超出最大高度时启用滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.fn.autoTextarea = function (options) { 
            var defaults = { 
                maxHeight: null,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度 
                minHeight: $(this).height() //默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示 
            }; 
            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'; 
                    } 
                }); 
            }); 
        };

$.fn.extend({ 
            textareaAutoHeight: function (options) { 
                this._options = { 
                    minHeight: 0, 
                    maxHeight: 1000 
                } 
  
                this.init = function () { 
                    for (var p in options) { 
                        this._options[p] = options[p]; 
                    } 
                    if (this._options.minHeight == 0) { 
                        this._options.minHeight = parseFloat($(this).height()); 
                    } 
                    for (var p in this._options) { 
                        if ($(this).attr(p) == null) { 
                            $(this).attr(p, this._options[p]); 
                        } 
                    } 
                    $(this).keyup(this.resetHeight).change(this.resetHeight) 
                    .focus(this.resetHeight); 
                } 
                this.resetHeight = function () { 
                    var _minHeight = parseFloat($(this).attr("minHeight")); 
                    var _maxHeight = parseFloat($(this).attr("maxHeight")); 
  
                    if (!window.attachEvent) { 
                        $(this).height(0); 
                    } 
                    var h = parseFloat(this.scrollHeight); 
                    h = h < _minHeight ? _minHeight : 
                                h > _maxHeight ? _maxHeight : h; 
                    $(this).height(h).scrollTop(h); 
                    if (h >= _maxHeight) { 
                        $(this).css("overflow-y", "scroll"); 
                    } 
                    else { 
                        $(this).css("overflow-y", "hidden"); 
                    } 
                } 
                this.init(); 
            } 
        });