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

Question

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

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

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

例子：

我的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; 我不确定我的解决方案是否适合您的聊天窗口，因为它用于页面转换，但经过一些测试，这是我的 hack。"content"是 an 的 id，它iframe在需要更改页面时调用的 javascript 函数内执行：

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

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

Answer 2

这似乎解决了我的问题：

element.style.height = "auto";

Answer 3

@nixahn 和 @jeff 的两个答案都对我有用（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();

Answer 4

我使用了一个具有固定高度的 div，而 auto 的问题是它调整了元素的大小，我在设置内部 HTML 后使用以下代码修复了这个问题：

element.style.height = "auto"; element.style.height = "400px";

现在 scrollHeight 已正确重置并给出内部 HTML 的真实高度

Answer 5

我遇到了同样的问题——一个内容可编辑的 div，scrollHeight当删除行时它不会缩小。

接受的答案并没有解决我的问题，但是，删除了 div 的父母display: flex;。