Jquery实现textarea根据文本内容自适应高度
更新时间：2015年04月03日 10:15:02 投稿：hebedich
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度，这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件，这里推荐给小伙伴们。
在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高，这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候，文本框的高度就自动撑高了，大大改善了体验，这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。
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
});
以上所述就是本文的全部内容了，希望能够给大家学习jQuery有所帮助。
相关文章
一样的table？不一样的table(可编辑状态table)
今天要分享的table不仅仅能显示数据，还可以对数据进行编辑，当鼠标点击数据时相应的数据格就变成可编辑的状态，废话不多说，进入今天的主题2012-09-09
该方法的运用是从后台数据库中一次性取出所有的数据，运用Jquery把一部分数据隐藏起来，事实上数据还是全部在html页面中2011-06-06
如何为已经绑定A事件的对象添加B事件，由B事件判断A事件是否触发2009-09-09
这篇文章主要介绍了jquery实现浮动的侧栏,实例分析了基于jQuery的stickySidebar插件实现浮动层的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了Jquery上传插件webupload的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
通过 jquery 的循环方法进行数组遍历，但是当不符合条件时，怎么跳出当前循环，解决方法如下,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery隐藏和显示效果实现的相关资料,需要的朋友可以参考下2016-04-04
使用jquery动态加载javascript以减少服务器压力
如果您要创建一个web2.0的应用程序，那么你的网页会包括大量的JavaScript文件，这些可能会拖慢您的网页。因此，动态加载JavaScript代码到您的网页是一个好主意，即只有当实用他们的时候加载它们。这种策略可以帮助你减少你的网页的加载时间2012-10-10
本篇文章主要介绍了jQuery中用on绑定事件时需注意的事项，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了jquery点击缩略图切换视频播放，我们可以点击缩略图切换不同的视频进行播放，过去是实现图片切换现在有进一步实现视频切换，感兴趣的小伙伴可以参考下。2015-09-09
最新评论