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

Question

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

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

谢谢

Answer 1

试试这个

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

DEMO

UPDATE

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

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

DEMO

多个TEXTAREAS的更新

$("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

你可以用它.这个对我有用.

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

Answer 4

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

$(document).ready( function( ) {

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

});

在这里小提琴