Javascript 如何获取textarea内文本的高度

How to get the height of the text inside of a textarea

提问by Adam

I have a textareawith the the text Hello World. I would like to get the height of this text.

我有一个textarea与文本Hello World。我想获得此文本的高度。

I've tried to use:

我试过使用：

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

and:

和：

var textHeight = element.value.offsetHeight;

But these don't give the numbers of the text, but the height of the textareaelement.

但是这些没有给出文本的数字，而是textarea元素的高度。

采纳答案by Warty

Create a span element, set Span's innerHTML to "Hello World".
Get the span's offsetHeight.

创建一个span元素，设置Span的innerHTML为“Hello World”。
获取跨度的偏移高度。

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

note that you must set the span's font style to the textarea's font style.

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

Your example will NEVER work because innerHTML and value are both strings. String doesn't define offsetWidth.

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

If you wish to get the height of selected text inside of a textarea, use selectionStart/selectionEnd to find the selected text of the textarea.

如果您希望获得 textarea 内选定文本的高度，请使用 selectionStart/selectionEnd 来查找 textarea 的选定文本。

回答by edeverett

element.scrollHeight is probably worth investigating.

element.scrollHeight 可能值得研究。

If I was going to approach this (and I've not tested this at all), I'd set the textarea's height to 1px measure the scroll height and then reset the textarea's height.

如果我打算解决这个问题（我根本没有测试过），我会将 textarea 的高度设置为 1px 测量滚动高度，然后重置 textarea 的高度。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

回答by patrick

In jQuery there is no scrollHeight, so it needs a little workaround. the solution would be:

在 jQuery 中没有 scrollHeight，所以它需要一些解决方法。解决办法是：

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

or shorter:

或更短：

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

回答by Dawe

You can use element.scrollHeight (just like Patrick answered) but it needs some corrections (I'm using jQuery in example):

您可以使用 element.scrollHeight （就像帕特里克回答的那样）但它需要一些更正（我在示例中使用 jQuery）：

1) if your textarea has padding, you need to substract it (top & bottom).

1) 如果你的 textarea 有填充，你需要减去它（顶部和底部）。

2) if element has already set height, you need to set it to zero (just for measure then set it back, else it returns this height + padding)

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)

There is no need of extra span with same css as textarea.

不需要与 textarea 具有相同 css 的额外跨度。

回答by fffred

I am not sure whether I interpret your question correctly, but I personally needed to know the exact height of each line of text. The line-heightproperty does not have the right value (for example, in Safari, it will be rounded to the closest value when actually printing text).

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

This is my workaround. You should have the following code somewhere at the beginning of the document.

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

// 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;

The variable inputLineHeightshould contain the correct value, in pixel.

该变量inputLineHeight应包含正确的值，以像素为单位。

回答by Timo Huovinen

http://www.quirksmode.org/dom/range_intro.htmlsorry that I can't be of more help.

http://www.quirksmode.org/dom/range_intro.html抱歉，我无法提供更多帮助。

the problem with you example is that inline text does not have a height, it only has a line-height, for it to have a height it needs to be in display block mode, so that all the lines are added to a block of text, even then it all depends on the width of the box and the font-size, font-family etc.

你的例子的问题是内联文本没有高度，它只有一个行高，为了它有一个高度，它需要处于显示块模式，这样所有的行都被添加到一个文本块中，即便如此，这一切都取决于框的宽度和字体大小、字体系列等。

what ItzWarty suggests is getting the text selection and putting it in a div that has the same font and width as the textarea, which has display block and allows you to get its height.

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