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

javascript textarea innerhtml
Adam Halasz picture Adam Halasz · Jul 27, 2010 · Viewed 42k times · Source

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

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 textarea element.

Answer

edeverett picture edeverett · Jul 27, 2010

element.scrollHeight is probably worth investigating.

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.

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

Related questions

JavaScript get TextArea input via .value or .innerHTML?

Is it ok to get the value of a textarea element in JavaScript with myTextArea.value or should I use myTextArea.innerHTML? Thank you.

Read More
Creating a textarea with auto-resize

There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes …

Read More
How to add line breaks to an HTML textarea?

I’m editing a <textarea> with JavaScript. The problem is that when I make line breaks in it, they won’t display. How can I do this? I’m getting the value to write a function, but it …

Read More