Wymuszenie zmiany rozmiaru podczas czytania tekstu z pliku

Question

Sugerowany duplikat to pytanie, na podstawie którego otrzymałem podstawę dla tego pytania, więc jest to , a nie duplikat! W rzeczywistości, ja już zostały połączone na to pytanie od początku ...

---

DOBRY EDIT:

Zrobiłem JSFiddle (mój pierwszy raz :)). Zwróć uwagę, że obszar tekstowy nie rozwija się zgodnie z oczekiwaniami. Wpisz coś wewnątrz textarea i natychmiast zmieni rozmiar.

Jeśli możemy automatycznie wysłać zdarzenie keypress, może zadziałać ... (this odpowiednie pytanie nie pomogło, odpowiedzi nie przyniosły skutku).

---

Używam textarea jak jest z here. Następnie czytam z pliku i umieszczam zawartość wewnątrz pola tekstowego, ale nie jest ona zmieniana tak jak powinna.

zaktualizować pole tekstowe tak:

function updateTextbox(text) { 
    $('#cagetextbox').val(text); 
}; 

jakieś pomysły?

Jestem na Firefoksie 34,0 w wersji kanonicznej, na Ubuntu 12.04, jeśli to odgrywa pewną rolę, co mam nadzieję, nie jest prawdą, ponieważ niektórzy z moich użytkowników korzystają z Chrome.

---

EDIT:

Próba byłoby napisać coś takiego:

$('#cagetextbox').attr("rows", how many rows does the new text contain); 

Zauważ, że jeśli spróbujemy find out how many lines of text the textarea zawiera otrzymamy 1 jako odpowiedź.

---

EDIT_2

Może coś width/(length_of_line * font_size). Dla kilku testów wydaje się poprawne, jeśli odjęto 1 (zachowując tylko całkowitą część wyniku oczywiście).

Answer 1

Twój textarea nie aktualizuje wysokość samego, nawet jeśli wyzwoli „input.textarea” na to, ponieważ ta wartość jest niezdefiniowana:

this.baseScrollHeight 

jest zdefiniowana tylko po „uwagi” na textarea.

Mam zmodyfikowaniu kodu trochę: http://jsfiddle.net/n1c41ejb/4/

tak, na 'wejście'

$(document).on('input.textarea', '.autoExpand', function(){ 
     var minRows = this.getAttribute('data-min-rows')|0, 
      rows; 
     this.rows = minRows; 
     this.baseScrollHeight = this.baseScrollHeight | calcBaseScrollHeight(this); 
     rows = Math.ceil((this.scrollHeight - this.baseScrollHeight)/16); 
     this.rows = minRows + rows; 
    }); 

i przenieść obliczenia baseScrollHeight do osobnej funkcji

function calcBaseScrollHeight(textArea) { 
    var savedValue = textArea.value, 
     baseScrollHeight; 
    textArea.value = ''; 
    baseScrollHeight = textArea.scrollHeight; 
    textArea.value = savedValue; 
    return baseScrollHeight; 
} 

następnie wezwać updateTextBox w ten sposób:

$('#cagetextbox').val(text).trigger('input.textarea'); 

Answer 2

Możesz użyć poniższego kodu, aby dostosować wysokość elementu, w twoim przypadku textarea. Chociaż używa pętli, w ten sposób unika kilku problemów z wyświetlaniem i przewijaniem.

function autoheight(a) { 
    if (!$(a).prop('scrollTop')) { 
     do { 
      var b = $(a).prop('scrollHeight'); 
      var h = $(a).height(); 
      $(a).height(h - 5); 
     } 
     while (b && (b != $(a).prop('scrollHeight'))); 
    }; 
    $(a).height($(a).prop('scrollHeight')); 
} 

Zmień rozmiar na dowolnych wydarzeniach.

I/lub gdy zdarzenia nie są wyzwalane automatycznie wywołaj je sam.

function updateTextbox(text) { 
    $('#cagetextbox').val(text); 
    autoheight($("#cagetextbox")); 
}; 

Fiddle

Answer 3

I stworzył skrzypce pracy. Tworzy wejściowe pole tekstowe dokładnie tak, jakby było wyświetlane w niewidocznym dziale div.

https://jsfiddle.net/khgk7nt5/2/

Przykład CSS

.test{ 
    font-family:"Times New Roman", Times, serif; 
    font-color:#CCCCCC; 
    font-size:20px; 
    width:300px; 
} 
.testLoc{ 
    position:absolute; 
    top:-1000px; 
} 

JavaScript

var testText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore" 

var test = $("<div/>"); 
test.addClass("test testLoc"); 
test.text(testText); 
$("body").append(test); 

var out = $("<textarea/>"); 
out.addClass("test"); 
out.width(test.width()); 
out.height(test.height()); 
out.val(testText); 
$("body").append(out); 
test.remove();