Javascript 调整文本区域大小以适应加载jquery时的所有文本

我知道这方面已经有很多讨论，但我还没有找到解决方案来解决我的需求。基本上，我需要自动增长一个文本区域不是当你键入，而是在加载。我从数据库中提取内容，并根据用户的设置在文本区域上生成覆盖，但在执行此操作时，文本区域不可滚动，因此我需要自动调整这些内容的大小以显示所有文本

我试过scrollHeight，但效果不太好，因为屏幕上有多个文本框

谢谢你试试这个

$("textarea").height( $("textarea")[0].scrollHeight );

---

更新

为了让它在旧版IE中工作，只需在执行之前增加一个非常短的延迟

window.setTimeout( function() {
    $("textarea").height( $("textarea")[0].scrollHeight );
}, 1);​

多个文本区域的更新

$("textarea").each(function(textarea) {
    $(this).height( $(this)[0].scrollHeight );
});

---

这是一个解决办法。。或许还有另一种解决方案：

 $('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();

});

$（'textarea'）。每个（函数（）{
变量高度=$（''）
.html（$（this.val（））
.appendTo（'正文'）
.高度（）；
$（this.css（'height'，height+'px'）；
$（“#我的隐藏div”）.remove（）；
});

---

您可以在此处看到演示

或者，您可以在HTML5中使用可编辑的div

---

参考资料：

您提到有多个文本框。此代码将根据每个文本区域的内容设置其高度

$(document).ready( function( ) {

    $("textarea").each( function( i, el ) {
        $(el).height( el.scrollHeight );
    ​});

});

---

拉小提琴这对我很有用；它循环遍历PageReady上的所有“textarea”元素，并设置它们的高度

$(function () {
    $("textarea").each(function () {
        this.style.height = (this.scrollHeight+10)+'px';
    });
});

您还可以将其与自动展开功能结合使用，以使其在编写时完全动态：

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'）。在（'change keypup keypdown paste cut'，'textarea'，function（）{
$（this.height（0.height）（this.scrollHeight）；
}).find（'textarea'）.change（）

怎么样

111111
222222
333333
444444
555555
666666
Tormod Haugene的解决方案对我有效

但我的文本区域在手风琴中，显然只有当文本区域在页面加载时可见时，它才起作用。手风琴项目是通过单击类为“title”的元素来触发的

所以我修改了代码Tormod Haugene来处理手风琴内容，这些内容被设置为显示：页面加载时无

在这种情况下，这可能对其他人有用：

jQuery(document).on('click', '.title', function () {
    jQuery("textarea").each(function () {
        this.style.height = (this.scrollHeight+10)+'px';
    });
});

您是否尝试过高度：100%

？@desbest是的，这不起作用，因为它包含在divi-lay-man方法中，可以定义文本大小和文本区域大小之间关系的算法，根据这一点，您可以使用$（“#textAreaID”）.attr（'size'，calculatedSize），一个非常不轻松但可能的解决方案当您有多个文本区域时，这在IE8中不起作用。我有一个很大的页面，非常依赖js进行验证。IE8中是否存在可能影响这一点的内容？这也会将所有文本区域的高度设置为jQuery返回的html元素数组中第一个文本区域的大小。@bruno这是一个解决实际问题的示例。我敢肯定，OP将不会有困难使工作示例适应他的实际情况，其中可能包括一个或多个文本区域-整个差异将只是一个简单的

each（）

这对页面上的多个文本区域不起作用-改用Tormod Haugene的代码-效果很好这就是我为什么喜欢这个地方的原因：D问谷歌一个正确的问题，就像有人问过的那样，而且，首先，你的代码片段需要满足！当您有多个文本区域时，这在IE8中不起作用。我有一个很大的页面，非常依赖js进行验证。IE8中有什么东西可能会影响这一点吗？我不知道为什么会投否决票。问题中没有提到IE8兼容性。非常感谢，这对我来说很有用，只是做了一些修改。我将0px设置为2em，我不知道为什么会有“-10”，我将其改为“+10”，因此下面总是有一点空白，不会感到局促。这是一个全面、通用的解决方案的最佳答案。将-10调整为所需的文本区域填充。不太好，因为当文本区域太高（高于屏幕）并且我按下文本区域底部的任何键时，屏幕会向上滚动。@IvanZ我解决了页面滚动问题。请现在试试。@shamim reza，现在我每次按任何键时都会改变它的高度。