如何获取文本框中文本的高度？

Question

我有一个带有文本Hello World的textarea。 我想要获取这个文本的高度。

我尝试使用：

var element = document.getElementById('textarea');
var textHeight = element.innerHTML.offsetHeight;

并且：

var textHeight = element.value.offsetHeight;

但是这些并不提供文本的数量，而是 textarea 元素的高度。

- Adam Halasz

Answer 1

element.scrollHeight 很可能值得研究。

如果我要处理这个问题（我没有进行过测试），我将设置 textarea 的高度为 1px，测量滚动高度，然后重置 textarea 的高度。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

- edeverett

---

刚刚测试了一下，它解决了我在 scrollHeight 上遇到的问题，该值给出了奇怪的值（每次在 IE11 上输入/删除字符时，滚动高度都会增加）。首先将文本区域的高度设置为 1px，然后它给出了所需的文本高度。 - LeigerGaming

这很棒，但当文本区域或其某些父元素设置为 display:none 时，它无法正常工作。 - phil294

Answer 2

创建一个 span 元素，将 Span 的 innerHTML 设置为 "Hello World"。
获取 span 的 offsetHeight。

var span = document.createElement("span");
span.innerHTML="Hello World"; //or whatever string you want.
span.offsetHeight // this is the answer

请注意，您必须将span的字体样式设置为textarea的字体样式。

您的示例永远不会起作用，因为innerHTML和value都是字符串。 字符串不定义offsetWidth。

如果您希望获取文本区域内所选文本的高度，请使用selectionStart / selectionEnd查找文本区域中所选的文本。

- Warty

---

啊哈，那我应该在<textarea>里创建一个<span>，对吧？ - Adam Halasz

不需要将该span附加到文档中。在上述代码之后，它将被处理掉。我还应该指出，该代码给出了带有顶部/底部填充的文本高度，就像使用span/div/任何其他元素一样。如果您不想要这个填充，可以使用CSS。 - Warty

我不知道 :|，这不是我的错。 - Adam Halasz

span元素不是textarea元素。 - Andrei Cristian Prodan

在 offsetHeight 返回任何内容之前，这个跨度需要被添加到文档中。我猜你需要在它与文本区域有相同的样式中添加它，但是你不知道哪些 CSS 样式被应用于文本区域，所以我不确定这个解决方案是否有效。 - Ally

Answer 3

在jQuery中没有scrollHeight，因此需要一些绕路。解决方案如下：

var areaheight=$("textarea#element")[0].scrollHeight;
$("#element").height(areaheight);

或更短:

$("#element").height($("#element")[0].scrollHeight)

- patrick

---

我不明白为什么StackOverflow允许人们在没有评论的情况下进行负投票...当我遇到与OP相同的问题并想出了一个有效的jQuery解决方案时，我发现了这个问题，并将其作为答案发布，以防其他人需要。这是一个清晰的问题答案，附有代码示例和解释...我不明白为什么会有负投票？！ - patrick

我不知道这是否是原因，但当我使用此代码在输入后更新文本区域的高度时，它总是增加约15像素的高度。即使我删除一行，它仍会扩大文本区域。 - Goldentoa11

这并不适用于动态用途。如果你想要它能够在动态环境下工作，需要将高度重置为自动，然后读取滚动高度并设置为该高度。 - patrick

Answer 4

您可以使用element.scrollHeight（就像Patrick回答的那样），但需要进行一些修正（以下示例中我使用了jQuery）：

1）如果您的文本区域具有填充，则需要减去它（顶部和底部）。

2）如果元素已经设置高度，则需要将其设置为零（仅用于测量，然后将其设置回来，否则它会返回此高度+填充）。

var h0 = $(element).height();  // backup height
$(this).height(0); 
var h = $(this).get(0).scrollHeight - $(this).css('paddingTop').replace('px','')*1 - $(this).css('paddingBottom').replace('px','')*1; // actual text height
$(this).height(h0); // set back original height (or new height using h)

不需要额外使用与文本区域具有相同CSS的span。

- Dawe

---

我不知道为什么其他答案都是错的却被选中并得到了投票。这是我发现的唯一正确且真正有效的答案。谢谢！ - shal

这应该是被接受的答案。如果页面中有1000个文本区域，您不希望在客户端上创建跨度、应用CSS，所有这些都只是为了获取文本高度并销毁跨度，从而产生如此大的负载。或者，您可以不使用文本区域，只需创建一个带有p和divs的完整CSS文本框。但是，对于文本区域，此解决方案完美地工作，它随着输入而增长和缩小，即使页面加载时填充了文本（与我能找到的大多数其他解决方案不同）。 - Furbeenator

Answer 5

针对任何使用React的人：

const textarea_ref = useRef(null);
const [idealHeight,setIdealHeight] = useState(0);
const [inputValue,setInputValue] = useState("");


useLayoutEffect(() => {                                           // useLayoutEffect TO AVOID FLICKERING
    textarea_ref.current.style.height = '0px';                    // NEEDS TO SET HEIGHT TO ZERO
    const scrollHeight = textarea_ref.current.scrollHeight;       // TO READ THE CORRECT SCROLL HEIGHT WHEN IT SHRINKS
    textarea_ref.current.removeAttribute('style');                // REMOVE INLINE STYLE THAT WAS ADDED WITH 0px
    setIdealHeight(scrollHeight + 2);                             // NEEDS TO ADD 2. I THINK IT'S BECAUSE OF THE BORDER
  },[inputValue]);

return (
  <textarea
    // USE idealHeight STATE TO SET THE HEIGHT
    value={inputValue}
    onChange={onChange}
    ref={textarea_ref}
  />
);

附注：它有时仍会闪烁。至少在Chrome浏览器中。

- cbdeveloper

Answer 6

你可以通过获取文本区滚动条的高度来获得文本的高度

const textarea = document.getElementByTagName("textarea");
const height = textarea.scrollHeight;

console.log({ height });

- Naycho334

Answer 7

我不确定我是否正确理解了你的问题，但我个人需要知道每行文本的确切高度。 line-height 属性没有正确的值（例如，在 Safari 中，当实际打印文本时，它将四舍五入到最接近的值）。

这是我的解决方法。你应该在文档的开头某处有以下代码。

// set one row in the textarea and get its height
element.rows = 1;
var height1 = parseFloat(window.getComputedStyle(element)["height"]);
// set two rows in the textarea and get its height
element.rows = 2;
var height2 = parseFloat(window.getComputedStyle(element)["height"]);
// Now, the line height should be the difference
var inputLineHeight = height2-height1;

变量inputLineHeight应该包含正确的像素值。

- fffred

Answer 8

http://www.quirksmode.org/dom/range_intro.html非常抱歉我不能提供更多帮助。

你的问题在于内联文本没有高度，它只有行高。要使其具有高度，需要将其设置为块级元素，这样所有行都会添加到文本块中，但这仍然取决于盒子的宽度、字体大小、字体系列等。

ItzWarty建议获取文本选择并将其放入一个div中，该div具有与textarea相同的字体和宽度，该textarea具有显示块并允许您获取其高度。

- Timo Huovinen