为什么我们在将 textarea 高度设置为 '0px' 之前将其设置为等于其 scrollHeight 以自动调整 textarea 的大小? [英] Why do we set textarea height to '0px' before setting it equal to its scrollHeight in order to auto size the textarea?

问题描述

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

I am using the code from https://stackoverflow.com/a/24676492/4997994 and modifying it for my question (mainly replacing element.style.height = "5px" with element.style.height = "0px"). My question is why do we even need to reset the textarea height before setting its height with its scrollHeight ?

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 属性是否以不同的方式计算其值?

It does give weird behavior with this line element.style.height = "0px" commented out as can be seen by running the code snippet below but what is causing this ? Does the scrollHeight attribute compute its value in a different way when the textarea height is not reset in the oninput handler ?

function auto_grow(element) {
    // element.style.height = "0px";
    element.style.height = (element.scrollHeight)+"px";
}

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

推荐答案

有几件事情正在发生.textarea 以初始内容高度、2px 的内边距(在所有边上，但特别针对这种情况，顶部和底部)和 content-box 的框大小开始.

There's a couple of things going on. The textarea starts with an initial content height, a padding of 2px (on all sides, but specifically for this case, top and bottom) and a box-sizing of content-box.

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

The next thing to understand is how the scrollheight of an element is calculated. It's from the top edge of the scrolling area to the bottom edge. The top edge is the top edge of its padding box. The bottom edge is defined as

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

The bottom-most edge of the element’s bottom padding edge and the bottom margin edge of all of the element’s descendants' boxes, excluding [not relevant in this case].

文本内容生成后代框，所以这意味着当你测量textarea的scrollHeight时，就是顶部填充的高度加上现有设置的内容高度+底部填充和文本高度的最大值.

The text content generates descendant boxes, so this means that when you measure the scrollHeight of the textarea, that's the height of top padding plus the maximum of the existing set content height + bottom padding and the text height.

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

By setting the content height to 0px first, it's reducing that scrollHeight to the height of top padding plus the maximum of the bottom padding and the text height, which for all practical purposes is always going to be the height of the text.

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

So the final content height set will always be set to the height of the contained text plus the top padding.

这篇关于为什么我们在将 textarea 高度设置为 '0px' 之前将其设置为等于其 scrollHeight 以自动调整 textarea 的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！