リサイズテキストボックスには、自動的に私はすでにそれ内のテキストボックスのテキストを持っているコンテンツ

Question

http://jsfiddle.net/h2vMN/1/

によると、実際のアプリケーションでは、これは動的に入力されますが、この質問のためには、事前に充填されました。

<textarea id="textarea"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor commodo ornare. Donec lobortis dui sed lectus egestas tristique. Vivamus vel metus turpis, faucibus varius risus. Aenean ante mauris, ultrices id facilisis vitae, dignissim eget sem. Quisque sed justo lectus, eget aliquet leo. Curabitur in mauris et diam fermentum venenatis. Proin ullamcorper, neque a vehicula euismod, odio enim aliquam ipsum, eu tristique urna sapien nec erat. 

Aliquam erat volutpat. In in lacus cursus dolor pellentesque posuere. Cras eu metus urna, a rhoncus ligula. Ut hendrerit orci in arcu dignissim id fermentum orci vulputate. Sed ante ligula, volutpat eu convallis vel, auctor in metus. Mauris euismod, metus eget venenatis sodales, risus tellus volutpat elit, et aliquet massa tellus ut sapien. Mauris tempor posuere massa et consectetur. Duis dignissim enim a nulla ultricies vitae vulputate felis commodo. Phasellus mollis est eget odio porttitor consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ut nibh auctor libero sagittis semper vitae quis erat. 
</textarea>​ 

上記のコードを実行すると、スクロールバーのある小さなテキストエリアがすべて表示されます。言い換えれば、ユーザーフレンドリーな面では全く役に立たない。テキストボックスのサイズは、コンテンツのサイズに合わせて自動的にどのように変更するのですか？幅は600pxに設定されています。

#textarea{width:600px;}​ 

私はjavascript/jqueryソリューションを希望します。私は一度、このプラグインを使用し

http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/view

注意、高さが自動的に

Answer 1

汝この：

$(document).ready(function(){ 
    tx = $('#textarea') 
    tx.height(tx.prop('scrollHeight')); 
}) 

DEMO

Answer 2

をリサイズする必要があります：

私はここで見つけることができます失敗し.autoresizeソリューションを、試してみましたhttp://www.jacklmoore.com/autosize それはうまく働きました。

Answer 3

$(document).ready(function(){ 
    var heightFudgeFactor = 10; 
    var id = 'tempid' + Date.now(); 
    $('#textarea').after($('<div>').css('font-family','monospace').css('white-space','pre-wrap').css('word-wrap','break-word').attr('id',id).css('width',$('#textarea').width()).text($('#textarea').text())); 
    $('#textarea').css('height',$('#'+id).outerHeight() + heightFudgeFactor).next().remove(); 
});​ 

ここで、私は内容に基づいて、テキストエリアの高さだ二div要素を作成しています、それを行うための一つの方法だが、あなた」あなたの実際の好みに合わせてもう少し遊ぶ必要があります