jQuery – Textarea自动增长插件跨浏览器兼容
我需要一个跨浏览器兼容的插件，当内部文本被写入或删除时，textrea会自动增长和缩小。
我尝试过Elastic插件和Padolsey autoresize的插件。 两者都在Firefox 3.6中失败。
我一直在使用以下代码段： Google Code上的Google AppEngine数据存储项目的Autogrow脚本@ Javascript绑定
如果URL可能已关闭或删除，请执行以下代码：
(function($) { /* * Auto-growing textareas; technique ripped from Facebook */ $.fn.autogrow = function(options) { this.filter('textarea').each(function() { var $this = $(this), minHeight = $this.height(), lineHeight = $this.css('lineHeight'); var shadow = $('').css({ position: 'absolute', top: -10000, left: -10000, width: $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')), fontSize: $this.css('fontSize'), fontFamily: $this.css('fontFamily'), lineHeight: $this.css('lineHeight'), resize: 'none' }).appendTo(document.body); var update = function() { var times = function(string, number) { for (var i = 0, r = ''; i < number; i ++) r += string; return r; }; var val = this.value.replace(//g, '>') .replace(/&/g, '&') .replace(/\n$/, '
') .replace(/\n/g, '
') .replace(/ {2,}/g, function(space) { return times(' ', space.length -1) + ' ' }); shadow.html(val); $(this).css('height', Math.max(shadow.height() + 20, minHeight)); } $(this).change(update).keyup(update).keydown(update); update.apply(this); }); return this; } })(jQuery); 要使用，只需在您想要自动增长的textareas上调用它。
例：
$('textarea').autogrow();
jQuery 可扩展 –
一个jQuery插件，可以自动扩展textareas以适应用户输入的内容
它是另一个伟大的textarea自动增长插件，与@Lashae发布的方法相同，但没有额外的function，如动画。
在1.6+中你不再需要一个插件来实现这一点，只需将一个change事件绑定到这个函数，你的textareas就会慷慨地扩展：
function form_autosize(this_element){ //Catch the current scroll position to stop it from jumping about in some browsers this_scroll = $(window).scrollTop(); //Clear any existing height settings $(this_element).css('height', ''); //Set the textarea to scroll so that you can capture its height $(this_element).css('overflow', 'scroll'); //Set the element height to the current scroll height $(this_element).height($(this_element).prop('scrollHeight')); //Hide the scrollbars $(this_element).css('overflow', 'hidden'); //Re-apply the scroll position $(window).scrollTop(this_scroll);
这似乎适用于最新版本的Chrome，Opera，Firefox和Safari。 没试过它是Internet Explorer或旧版本。
合适的变更事件可能是：
$(this_element).on('keyup change paste', function() { form_autosize(this_element) });
这是一个基于上述片段的插件，但修复了IE <= 8问题，并且还支持textareas的水平增长。
我在jQuery中使用了这个方法。
setInterval(function(){ $(name_textarea).css('height', $(name_textarea)[0].scrollHeight+2+'px') },100);
尝试一下，你可以在scrollHeight后面使用de number来获得最佳效果。
我刚刚为它写了一个angular指令（没有jQuery依赖），检查出来： angular-autogrow指令 （GitHub）