cambio de tamaño de texto automáticamente de acuerdo con el contenido

Question

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

Tengo un texto de cuadro de texto dentro de él ya, en la aplicación real que esto se llene de forma dinámica, pero por el bien de esta pregunta se ha precargada.

<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>​ 

Cuando ejecuto el código anterior, se muestra una pequeña área de texto con barras de desplazamiento por todas partes. En otras palabras, completamente inútil en términos de ser fácil de usar. ¿Cómo cambio automáticamente el tamaño del cuadro de texto de acuerdo con la cantidad de contenido que es y tiene un ancho establecido de 600 píxeles?

#textarea{width:600px;}​ 

Me gustaría una solución javascript/jquery.

He intentado la solución .autoresize sin éxito, que se puede encontrar aquí:

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

Nota, la altura debe ser de tamaño automáticamente

Answer 1

Thy esto:

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

DEMO

Answer 2

Una vez utilizado este plugin: http://www.jacklmoore.com/autosize funcionó bien .

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(); 
});​ 

Ésta es una forma de hacerlo, estoy creando un div secundaria que es la altura del área de texto, basado en el contenido, pero' Necesitaré jugar un poco más para que llegue a tu gusto.