5

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ソリューションが欲しいのですが。

私は解決策を試しました.autoresizeが失敗しました。これは次の場所にあります。

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

高さは自動的にサイズ変更される必要があることに注意してください

4

3 に答える 3

2

あなたのこれ：

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

デモ

于 2012-06-19T14:36:33.220 に答える
1 
$(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();
});​

これを行う1つの方法は、コンテンツに基づいてテキストエリアの高さであるセカンダリdivを作成することですが、実際の好みに合わせるには、もう少し試してみる必要があります。

于 2012-06-19T14:38:42.313 に答える
0

私はかつてこのプラグインを使用しました：http ：//www.jacklmoore.com/autosize それはうまくいきました。

于 2012-06-19T14:33:30.737 に答える