Search code examples
javascripttextareainnerhtml

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

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.

Solution

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

    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.

    Your example will NEVER work because innerHTML and value are both strings. String doesn't define 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.