Ridimensionamento forzato durante la lettura del testo dal file

Question

Il duplicato suggerito è la domanda in cui ho ottenuto la base per questa domanda, quindi è non un un duplicato! È un dato di fatto, ho già hanno collegato a questa domanda fin dall'inizio ...

---

BUONA EDIT:

ho fatto un JSFiddle (la mia prima volta :)). Si noti come la textarea non si espande come si vorrebbe. Digitare qualcosa all'interno dell'area di testo e verrà ridimensionato immediatamente.

Se possiamo inviare automaticamente un evento di pressione tasti, potrebbe funzionare ... (this la domanda pertinente non ha aiutato, le risposte non hanno avuto effetto).

---

Sto usando la textarea come da here. Poi, ho letto da un file e sto inserendo il contenuto all'interno della casella di testo, ma non viene ridimensionato come dovrebbe.

aggiorno la casella di testo come questo:

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

Tutte le idee?

Sono su firefox 34.0 canonico, su Ubuntu 12.04, se questo svolge un ruolo, che spero non sia il caso, dal momento che alcuni dei miei utenti usano Chrome.

---

EDIT:

Un tentativo sarebbe quello di scrivere qualcosa del genere:

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

Si noti che se proviamo a find out how many lines of text the textarea contiene, avremo 1 come risposta.

---

EDIT_2

Forse qualcosa di simile width/(length_of_line * font_size). Per alcuni test, sembra corretto, se ho sottratto 1 (mantenendo solo la parte intera del risultato, ovviamente).

Answer 1

tuo textArea non ha aggiornato l'altezza in sé, anche quando si attiva il 'input.textarea' su di esso perché questo valore non è definito:

this.baseScrollHeight 

E 'definita solo dopo un 'focus' sul textarea.

ho modificato il codice di un po ': http://jsfiddle.net/n1c41ejb/4/

così, su 'input'

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

e spostare il calcolo baseScrollHeight ad una funzione separata

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

quindi chiamare il vostro updateTextBox come questo:

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

Answer 2

È possibile utilizzare il seguente codice per regolare l'altezza di un elemento, nel caso si tratti di un'area di testo. Mentre utilizza un ciclo, evita più problemi di visualizzazione e scorrimento in questo modo.

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')); 
} 

Ridimensiona gli eventi che ti piacciono.

$("#cagetextbox").on("keyup change", function (e) { 
    autoheight(this); 
}); 

E/o quando gli eventi non vengono attivati, chiamarlo automaticamente.

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

Fiddle

Answer 3

ho creato un violino di lavoro. Crea un campo di testo di input esattamente come se fosse visualizzato nel div non modificabile.

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

Esempio 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();