Resize Textbox automatisch entsprechend dem Inhalt

Question

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

ich ein Textfeld Text in es bereits, in der tatsächlichen Anwendung wird diese dynamisch gefüllt werden, aber für die Zwecke dieser Frage es bereits gefüllt ist.

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

Wenn ich den obigen Code ausführen, zeigt es einen kleinen Textbereich mit Bildlaufleisten überall. Mit anderen Worten, völlig nutzlos in Bezug auf Benutzerfreundlichkeit. Wie ändere ich automatisch die Größe des Textfelds entsprechend der Menge des Inhalts, der sie ist, und es hat eine eingestellte Breite von 600px.

#textarea{width:600px;}​ 

Ich möchte eine Javascript/Jquery-Lösung.

ich erfolglos, die .autoresize Lösung versucht haben, die hier gefunden werden kann:

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

Hinweis sollte die Höhe automatisch

Answer 1

Thy dies:

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

DEMO

Answer 2

ich einmal dieses Plugin verwendet Größe verändert werden: http://www.jacklmoore.com/autosize Es funktionierte gut .

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

Hier ist eine Möglichkeit, es zu tun, ich bin eine sekundäre div schaffen, die die Höhe des Textbereiches ist, basierend auf dem Inhalt, aber Sie‘ ll müssen spielen mit ihm ein wenig mehr, um es zu Ihrem tatsächlichen Geschmack zu bekommen