根据内容自动调整文本框大小

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解决方案。

我尝试了.autoresize解决方案失败，可在此处找到：

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

$(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，它是textarea的高度，基于内容，但你需要多玩一点才能达到你的实际喜好

Answer 3

我曾经使用过这个插件：http://www.jacklmoore.com/autosize 它运作良好。