使用jQuery实现textarea自动调整高度

原创  郑建华   2020-09-15   16人阅读  0 条评论

jQuery插件代码:

$.fn.autoTextarea = function(options) {

	var defaults = {
		maxHeight: null,
		//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
		minHeight: $(this).height() //默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示
	};

	var opts = $.extend({},defaults, options);

	return $(this).each(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';
		}

		$(this).bind("paste cut keydown keyup focus blur ready",
		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';
			}
		});
	});

};

使用代码:

$("textArea").autoTextarea({
    minHeight:28,
    maxHeight:220,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
});



本文地址:https://www.zjh336.cn/?id=1974
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?