以编程方式更改内容后不会重置滚动高度

Question

我正在尝试在没有 jQuery 的情况下学习一些东西。这是我面临的挑战之一。

我有一个固定的contenteditable div，当向 div 添加文本时，如果scrollHeight超过clientHeight我缩小字体，直到内容适合 div。

有时我会“重建”以innerHTML编程方式替换文本的文本。或者用户可以删除应该减少 的文本scrollHeight，但在这两种情况下，scrollHeight仍然是最大值。我需要一些方法来增加字体大小以再次“适合”div。（理想情况下不是超级贵）

例子：

我的clientHeight=142，和scrollHeight=158。一个循环减小字体大小，直到scrollHeight142。然后，用户删除一行文本，但scrollHeight仍然是142，没有变化。

减少/增加高度的代码：

    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（以防万一）：

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

css（以防万一）：

#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;
}

Answer 1

我在同一条船上，但有一个iframe；我不确定我的解决方案是否适合您的聊天窗口，因为它用于页面转换，但经过一些测试，这是我的黑客。"content"是 an 的 id iframe，这是在需要页面更改时调用的 javascript 函数内执行的：

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

`src' 赋值方法将随后设置为 0 的值展开，从而达到所需的结果；可能有一种方法可以让您不断调整文本区域的大小；然而，我对你有视觉问题；我最终使用了计时器，以便在页面之间的转换透明的同时进行更改。