57

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

我试过 scrollHeight 但这不是很好，因为屏幕上有多个文本框

谢谢

4

7 回答 7

114

尝试这个

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

演示

更新

作为使其在较旧的 IE-s 中工作的技巧，只需在执行之前添加一个非常短的延迟

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

演示

多个文本区域的更新

$("textarea").each(function(textarea) {
    $(this).height( $(this)[0].scrollHeight );
});
于 2012-10-26T10:45:11.217 回答
42

这对我有用；它遍历页面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 评论更改答案。

于 2013-08-05T07:35:19.730 回答
13

你可以用这个。这个对我有用。

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

于 2015-05-20T09:59:00.410 回答
5

您提到有多个文本框。这段代码会根据自己的内容设置每个文本区域的高度。

$(document).ready( function( ) {

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

});

在这里提琴

于 2012-10-26T11:03:26.880 回答
3

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

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

于 2012-10-26T10:55:14.393 回答
2

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

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

于 2012-10-26T10:49:48.293 回答
0

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

但是我的文本区域在手风琴中，显然它只有在文本区域在页面加载时可见时才有效。通过单击具有“标题”类的元素来触发手风琴项。

所以我修改了代码 Tormod Haugene 以在手风琴内容中工作，这些内容设置为 display: none on page load。

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

jQuery(document).on('click', '.title', function () {
    jQuery("textarea").each(function () {
        this.style.height = (this.scrollHeight+10)+'px';
    });
});
于 2020-02-20T17:30:36.403 回答