jquery - シンプルな jQuery テキストエリアがロード時に展開されない

Question

以下は、jQuery で記述された単純な textarea スクリプトで、ユーザーが入力するコンテンツに合わせて各テキストエリアを拡張します。

$(document).ready(function() {
    $('textarea').keyup(function() {
       var addin = 0;
       var txtheight = $(this).scrollTop();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });
    $('textarea').keyup();
});

問題は、テキストエリアの初期コンテンツが 1 行を超える場合、スクロール位置を計算できないため、ロード時にテキストエリアがコンテンツに合わせて拡張されないことです。

これを回避する方法についてのアイデア。

Answer 1

このプラグインを試してみませんか?

http://www.jacklmoore.com/autosize

Answer 2

以下を試すことができます

$(document).ready(function() {
    $('textarea').each(function() {
       var addin = 0;
       var txtheight = $(this).prop("scrollHeight") -  $(this).height();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });
    $('textarea').keyup(function() {
       var addin = 0;
       var txtheight = $(this).scrollTop();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });
    $('textarea').keyup();
});​

ただし、スクロールの高さは、見た目が IE8 未満のものではサポートされていません。

Answer 3

$('textarea').each(function() {
        $(this).height($(this).prop('scrollHeight'));
    });
    $('textarea').keyup(function() {
       var addin = 0;
       var txtheight = $(this).scrollTop();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });

'scrollHeight'Danny から概説されたの正しい使用。