Question

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

我尝试过scrollHeight，但由于屏幕上有多个文本框，因此效果不佳

由于

Answer 1

试试这个

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

DEMO

<强>更新

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

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

DEMO

多个文字的更新

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

Answer 2

这对我有用;它遍历页面Ready上的所有“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评论改变了答案。

Answer 3

你可以用它。它对我有用。

＆＃13;

$('#content').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();

＆＃13;

<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>

＆＃13;

Answer 4

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

$(document).ready( function( ) {

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

});

小提琴here

Answer 5

或者，您可以在HTML 5中使用可编辑的div。

参考：http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable

Answer 6

这是一种解决方法..也许是另一种解决方案：

 $('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/

Answer 7

Tormod Haugene的解决方案对我有用。

但是我的textareas位于手风琴中，显然只有在页面加载时可见textarea时它才起作用。单击具有“ title”类的元素可触发手风琴项目。

因此，我修改了代码Tormod Haugene使其可在手风琴内容中使用，该内容设置为显示：页面加载时无显示。

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

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

调整文本区域大小以适合加载jquery上的所有文本

7 个答案: