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

Question

What I want:

---

So I have a textarea.

I write Hello World into the the textarea.

I want to get the Hello World's Height in Javascript.

What I have tried yet:

---

    element = document.getElementById('textarea');

    var textHeight = element.innerHTML.offsetHeight;

    or this:
    var textHeight = element.value.offsetHeight;

But these are not working.

Answer 1

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.

Answer 2

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

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, witch has display block and allows you to get its height.

Answer 3

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/DOM/element.scrollHeight