时间戳

首页 > 解决方案 > 为什么我们将 textarea 高度设置为'0px'，然后再将其设置为等于它的 scrollHeight 以自动调整 textarea 的大小？

javascript - 为什么我们将 textarea 高度设置为'0px'，然后再将其设置为等于它的 scrollHeight 以自动调整 textarea 的大小？

问题描述

我正在使用https://stackoverflow.com/a/24676492/4997994中的代码并针对我的问题对其进行修改（主要替换element.style.height = "5px"为element.style.height = "0px"）。我的问题是为什么我们甚至需要在使用它的 scrollHeight 设置它的高度之前重置 textarea 的高度？

function auto_grow(element) {
    element.style.height = "0px"; // why do we even need this line ?
    element.style.height = (element.scrollHeight)+"px";
}

<textarea oninput="auto_grow(this)"></textarea>

element.style.height = "0px"通过运行下面的代码片段可以看出，注释掉这一行确实会产生奇怪的行为，但这是什么原因造成的？当 oninput 处理程序中未重置 textarea 高度时，scrollHeight 属性是否以不同的方式计算其值？

function auto_grow(element) {
    console.log(`Before- ${element.scrollHeight}`);
    // element.style.height = "0px";
    element.style.height = (element.scrollHeight)+"px";
    console.log(`After- ${element.scrollHeight}`);
}
<textarea
  oninput="auto_grow(this)"></textarea>

标签： javascripthtmldomtextarea

解决方案

有几件事正在发生。textarea 以初始内容高度、2px 的内边距（在所有边上，但专门针对这种情况下，顶部和底部）和 content-box 的 box-sizing 开始。

接下来要了解的是如何计算元素的滚动高度。它是从滚动区域的上边缘到下边缘。顶部边缘是其填充框的顶部边缘。底边定义为

元素底部填充边缘的最底部边缘和元素所有后代框的底部边缘边缘，不包括[在这种情况下不相关]。

文本内容生成后代框，因此这意味着当您测量 textarea 的 scrollHeight 时，即顶部填充的高度加上现有设置的内容高度 + 底部填充和文本高度的最大值。

通过首先将内容高度设置为 0px，它将 scrollHeight 减少到顶部填充的高度加上底部填充和文本高度的最大值，对于所有实际目的，它始终是文本的高度。

所以最终的内容高度集将始终设置为包含文本的高度加上顶部填充。

推荐阅读