Redimensionner la force lors de la lecture de texte à partir du fichier

Question

Le doublon suggéré est la question où j'ai obtenu la base de cette question, donc c'est pas un doublon! En fait, je déjà ont lié à cette question dès le début ...

---

BON EDIT:

J'ai fait une JSFiddle (première fois :)). Remarquez comment la zone de texte ne se développe pas comme on le souhaiterait. Tapez quelque chose à l'intérieur de la zone de texte et il sera redimensionné immédiatement.

Si nous pouvons envoyer automatiquement un événement de pression de touche, cela peut fonctionner ... (this question pertinente n'a pas aidé, les réponses n'ont eu aucun effet).

---

J'utilise le textarea comme est de here. Ensuite, je lis dans un fichier et je place le contenu dans la zone de texte, mais il ne se redimensionne pas comme il se doit.

mettre à jour la zone de texte comme celui-ci:

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

Toutes les idées?

Je suis sur firefox 34.0 canonical, à Ubuntu 12.04, si cela joue un rôle, ce qui, je l'espère, n'est pas le cas, puisque certains de mes utilisateurs utilisent Chrome.

---

EDIT:

Une tentative serait d'écrire quelque chose comme ceci:

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

Notez que si nous essayons de find out how many lines of text the textarea contient, nous aurons 1 réponse.

---

EDIT_2

Peut-être quelque chose comme width/(length_of_line * font_size). Pour quelques tests, il semble correct, si j'en soustrais 1 (en ne gardant que la partie entière du résultat bien sûr).

Answer 1

Votre textArea n'a pas mis à jour la hauteur elle-même, même lorsque vous déclenchez le « input.textarea » sur elle parce que cette valeur est indéfinie:

this.baseScrollHeight 

Il est seulement défini après une « focus » sur la zone de texte.

J'ai modifié votre code un peu: http://jsfiddle.net/n1c41ejb/4/

donc, sur 'entrée'

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

et déplacer le calcul de baseScrollHeight à une fonction séparée

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

puis appelez votre updateTextBox comme ceci:

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

Answer 2

Vous pouvez utiliser le code suivant pour ajuster la hauteur d'un élément, dans votre cas, une zone de texte. Bien qu'il utilise une boucle, il évite plusieurs problèmes d'affichage et de défilement de cette façon.

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

Redimensionnez sur les événements que vous aimez.

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

Et/ou lorsque les événements ne sont pas déclenchés automatiquement, appelez-le vous-même.

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

Fiddle

Answer 3

J'ai créé un violon de travail. Il crée un champ de texte d'entrée exactement comme s'il était affiché dans la div non éditable.

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

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