调整文本区域的大小，以适应加载jQuery的所有文本
我知道有很多这方面的讨论，但我还没有find一个解决scheme来解决我的需求。 基本上我需要autogrow一个文本区域，而不是当你键入，但在加载。 我从数据库中提取内容，并依赖于用户的设置，在文本区域生成叠加层，但在此操作时，文本区域不可滚动，因此我需要自动大小以显示所有文本。
我试过scrollHeight，但是这不是很好，因为屏幕上有多个文本框
谢谢
尝试这个
$("textarea").height( $("textarea")[0].scrollHeight );
DEMO
UPDATE
作为一个黑客，使其在早期的IE浏览器工作，只是在执行之前添加一个非常短的延迟
window.setTimeout( function() { $("textarea").height( $("textarea")[0].scrollHeight ); }, 1);
DEMO
更新多个TEXTAREAS
$("textarea").each(function(textarea) { $this.height( $this[0].scrollHeight ); });
这对我有效; 它通过Ready页面上的所有“textarea”元素循环，并设置其高度。
$(function () { $("textarea").each(function () { this.style.height = (this.scrollHeight+10)+'px'; }); });
您还可以将其与自动展开function结合使用，以便在写入时使其完全dynamic：
function autoresize(textarea) { textarea.style.height = '0px'; //Reset height, so that it not only grows but also shrinks textarea.style.height = (textarea.scrollHeight+10) + 'px'; //Set new height }
并从“keyup”事件或通过jQuery调用：
$('.autosize').keyup(function () { autoresize(this); });
注意我是如何在滚动高度上添加10px的：在这里你可以调整文本区域底部给用户的空间大小。
希望能帮助别人。 🙂
编辑：根据@Mariannes评论改变了答案。
你可以使用这个。 这个对我有用。
$('#content').on('change keyup keydown paste cut', 'textarea', function () { $(this).height(0).height(this.scrollHeight); }).find('textarea').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="content"> <textarea>How about it</textarea><br /> <textarea>111111 222222 333333 444444 555555 666666</textarea> </div>
你提到有多个文本框。 这段代码会根据自己的内容设置每个textarea的高度。
$(document).ready( function( ) { $("textarea").each( function( i, el ) { $(el).height( el.scrollHeight ); }); });
在这里拨弄
或者，您可以在HTML 5中使用可编辑的div。
参考： http : //www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable
这是一个解决方法..也许一个替代解决scheme：
$('textarea').each(function(){ var height = $('<div style="display:none; white-space:pre" id="my-hidden-div"></div>') .html($(this).val()) .appendTo('body') .height(); $(this).css('height',height + 'px'); $('#my-hidden-div').remove(); });
你可以在这里看到一个演示http://jsfiddle.net/gZ2cC/
