javascript - 以编程方式更改内容后 scrollHeight 不重置

Question

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

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

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

例子:

我的clientHeight = 142，而scrollHeight = 158。循环减小字体大小，直到scrollHeight为142。然后，用户删除了一行文本，但是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" 是 iframe 的 ID，它在需要页面更改时调用的 javascript 函数中执行:

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

`src' 赋值方法将紧接着设置为 0 的值展开，达到了预期的结果；可能有一种方法可以让您像那样不断调整文本区域的大小；但是，我对你有视觉问题；我最终使用了计时器，以便在页面之间的过渡透明时进行更改。