如何获取文本区域内文本的高度

Question

我有一个textarea文本Hello World.我想得到这篇文章的高度.

我试过用:

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

和:

var textHeight = element.value.offsetHeight;

但是这些不是给出文本的数字,而是给出textarea元素的高度.

Answer 1

创建一个span元素,将Span的innerHTML设置为"Hello World".
获得跨度的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都是字符串.String不定义offsetWidth.

如果要在textarea中获取所选文本的高度,请使用selectionStart/selectionEnd查找textarea的选定文本.

Answer 2

element.scrollHeight可能值得研究.

如果我要接近这个(我根本没有测试过),我会将textarea的高度设置为1px来测量滚动高度,然后重置textarea的高度.

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

Answer 3

在jQuery中没有scrollHeight,所以它需要一些解决方法.解决方案是:

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

或更短:

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

Answer 4

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

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

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)

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