Zmień rozmiar obszaru tekstowego tak, aby zmieścił się cały tekst w jquery załadunku

Question

Rozumiem, że było dużo dyskusji na ten temat, ale jeszcze nie znalazłem rozwiązania, które pozwoliłoby mi rozwiązać moje potrzeby. Zasadniczo muszę autogowić obszar tekstowy, nie podczas pisania, ale przy obciążeniu. Pobieram zawartość z bazy danych i zależnie od ustawień użytkownika nakładka jest nakładana na obszar tekstowy, ale w tym przypadku obszary tekstowe nie są przewijane, dlatego muszę je zarchiwizować, aby wyświetlić cały tekst.

Próbowałem scrollHeight ale to nie działa wielkie, jak istnieje wiele pól tekstowych na ekranie

Dzięki

Answer 1

Spróbuj

$("textarea").height($("textarea")[0].scrollHeight); 

DEMO

---

UPDATE

Jak hack, aby pracować w starszych IE-y tylko dodać naprawdę krótkie opóźnienie przed wykonaniem go

window.setTimeout(function() { 
    $("textarea").height($("textarea")[0].scrollHeight); 
}, 1);​ 

DEMO

UPDATE dla wielu pola tekstowe

$("textarea").each(function(textarea) { 
    $this.height($this[0].scrollHeight); 
}); 

Answer 2

To jest obejście .. i może alternatywne rozwiązanie:

$('textarea').each(function(){ 
    var height = $('<div style="display:none; white-space:pre" id="my-hidden-div"></div>') 
       .html($(this).val()) 
       .appendTo('body') 
       .height();  
    $(this).css('height',height + 'px'); 
    $('#my-hidden-div').remove(); 

}); 

można zobaczyć demo tutaj http://jsfiddle.net/gZ2cC/

Answer 3

Alternatywnie, można użyć edytowalną div w HTML 5.

referencyjny: http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable

Answer 4

Wspomniałeś istnieje wiele pola tekstowe. Ten kod ustawi wysokość każdego tekstu zgodnie z jego własną zawartością.

$(document).ready(function() { 

    $("textarea").each(function(i, el) { 
     $(el).height(el.scrollHeight); 
    ​}); 

}); 

Fiddle here

Answer 5

ten pracował dla mnie; przechodzi przez wszystkie elementy "textarea" na stronie Ready i ustawia ich wysokość.

$(function() { 
    $("textarea").each(function() { 
     this.style.height = (this.scrollHeight+10)+'px'; 
    }); 
}); 

Można również połączyć go z funkcją auto-poszerzyć, aby w pełni dynamiczny podczas pisania, a także:

function autoresize(textarea) { 
    textarea.style.height = '0px';  //Reset height, so that it not only grows but also shrinks 
    textarea.style.height = (textarea.scrollHeight+10) + 'px'; //Set new height 
} 

i nazwać z „keyup” imprezy lub poprzez jQuery:

$('.autosize').keyup(function() { 
    autoresize(this); 
}); 

Uwaga, w jaki sposób dodajemy 10 pikseli do wysokości przewijania: tutaj możesz ustawić ilość miejsca, w które chcesz dolewać obszar tekstowy, aby dać użytkownikowi.

Nadzieję, że pomaga komuś.:)

Edytuj: Zmieniono odpowiedź zgodnie z komentarzem @Mariannes.

Answer 6

możesz tego użyć. Mi to pasuje.

$('#content').on('change keyup keydown paste cut', 'textarea', function() { 
 
     $(this).height(0).height(this.scrollHeight); 
 
    }).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <textarea>How about it</textarea><br /> 
 
    <textarea>111111 
 
222222 
 
333333 
 
444444 
 
555555 
 
666666</textarea> 
 
</div>