scrollHeight ne se réinitialise pas après un changement de contenu par programmation - javascript, redimensionner, user-input

J'essaie d'apprendre quelques choses sans jQuery. Voici l'un des défis auxquels je suis confronté.

J'ai un fixe contenteditable div que lors de l'ajout de texte à la div, si le scrollHeight dépasse le clientHeight Je réduit la police jusqu'à ce que le contenu corresponde à la div.

Parfois, je "reconstruis" le texte qui remplace le innerHTML par programmation. Ou l'utilisateur peut supprimer du texte qui devrait diminuer scrollHeight, mais dans les deux cas, le scrollHeight reste la valeur maximale. J'ai besoin d'un moyen d'augmenter la taille de la police pour "adapter" le div à nouveau. (qui n'est idéalement pas t super cher)

Exemple:

ma clientHeight = 142, et le scrollHeight = 158. Une boucle réduit la taille de la police, jusqu'à ce que scrollHeight est 142. Ensuite, l'utilisateur supprime une ligne de texte, mais le scrollHeight est encore 142, pas de changement.

code pour réduire / augmenter la hauteur:

    var textBox = document.getElementById("text");
var current, min = 6, max = 14;
current = textBox.style.fontSize.substr(0, textBox.style.fontSize.length - 2);
current = parseInt(current);
if (textBox.clientHeight < textBox.scrollHeight) {
while (textBox.clientHeight < textBox.scrollHeight) {
current--;
if (current < min) break;
textBox.style.fontSize = "" + current + "pt";
}
} else if (textBox.clientHeight > textBox.scrollHeight) {
while (textBox.clientHeight > textBox.scrollHeight) {
current++;
if (current > max) break;
textBox.style.fontSize = "" + current + "pt";
}
}

html (si cela compte):

<div id="text" contenteditable="true"></div>

css (si cela compte):

#text {
position: relative;
border: 1px solid blue;
top: 180px;
left: 31px;
width: 300px;
height: 132px;
padding: 5px;
font-family: "mplantin";
font-size: 14pt;
font-weight: 200;
}

Réponses:

3 pour la réponse № 1

J'étais sur le même bateau, mais avec un iframe; Je ne suis pas sûr que ma solution convienne à votre fenêtre de discussion car elle est destinée à la transition de page, mais après quelques tests, c'est mon hack. "content" est l'id d'un iframe et ceci est exécuté dans une fonction javascript appelée lorsque le changement de page est nécessaire:

var c=document.getElementById("content");
c.width=0;
c.height=0;
c.src="page.html";

la méthode d'affectation `src 'étend les valeursmettre à 0 immédiatement après, atteindre le résultat souhaité; il y a peut-être un moyen de redimensionner constamment une zone de texte comme celle-ci; Cependant, j'ai eu des problèmes visuels avec vous; J'ai fini par utiliser des minuteries pour que le changement ait lieu pendant que la transition entre les pages était transparente.


1 pour la réponse № 2

Cela semblait corriger mon problème:

element.style.height = "auto";

1 pour la réponse № 3

les deux réponses de @nixahn et @jeff fonctionnent pour moi (chrome, ff)

iframe.style.height ="0"; // or "auto"
iframe.contentWindow.document.open();
iframe.contentWindow.document.write("<style>"+css+"</style>");
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

questions connexes
Menu