57

これについて多くの議論があったことは理解していますが、自分のニーズを解決するための解決策をまだ見つけていません。基本的に、入力時ではなくロード時にテキスト領域を自動拡張する必要があります。データベースからコンテンツを取得しており、ユーザーの設定に応じてテキスト領域にオーバーレイが作成されますが、これを行うとテキスト領域はスクロールできないため、すべてのテキストを表示するにはこれらを自動サイズ設定する必要があります。

scrollHeightを試しましたが、画面に複数のテキストボックスがあるため、これはうまく機能しません。

ありがとう

4

7 に答える 7

114

これを試して

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

デモ

アップデート

古いIEで動作させるためのハックとして、実行する前に非常に短い遅延を追加するだけです

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

デモ

複数のTEXTAREASの更新

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

または、HTML5で編集可能な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

TormodHaugeneのソリューションは私のために働きました。

しかし、私のtextareasは、アコーディオンで、明らかにtextareaがページの読み込み時に表示された場合にのみ機能しました。アコーディオンアイテムは、クラス「title」の要素をクリックすることでトリガーされます。

そこで、コードTormod Haugeneを、ページの読み込み時に表示されるように設定されたアコーディオンコンテンツ内で機能するように調整しました。

たぶん、これはこの状況で他の誰かに役立つでしょう：

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