Jquery实现textarea根据文本内容自适应高度
程序员文章站
2022-03-23 11:47:13
在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是...
在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。
autoTextarea.js
(function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight: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'; } }); }); }; })(jQuery);
demo.js
$(".doctable textarea").autoTextarea({ maxHeight:400, minHeight:100 });
推荐阅读
-
文本框根据输入内容自适应高度的代码
-
Javascript 文本框textarea高度随内容自适应增长收缩
-
Javascript 文本框textarea高度随内容自适应增长收缩
-
文本框根据输入内容自适应高度的代码
-
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
-
Vue进阶(幺叁玖):textarea文本框根据内容自适应改变高度
-
Jquery实现textarea根据文本内容自适应高度
-
Textarea根据内容自适应高度_javascript技巧
-
文本框根据输入内容自适应高度的代码_表单特效
-
Javascript 文本框textarea高度随内容自适应增长收缩_表单特效