How do I get the height of a textarea

Question

I need to get the height of a textarea. Seemingly so simple but it's driving me mad.

I have been researching for ages on stackoverflow with no luck: textarea-value-height and jquery-js-get-the-scrollbar-height-of-an-textarea and javascript-how-to-get-the-height-of-text-inside-of-a-textarea, among many others.

This is how it looks currently:

This is how I want it to look, open a full height:

.

Here is my html:

 <textarea id="history" class="input-xxlarge" placeholder="Enter the content ..." rows="13"></textarea>

CSS:

 .input-xxlarge {
    display: inline-block;
    height: auto;     
    font-size: 12px;
    width: 530px;
    resize: none;
    overflow: auto;
 }

jQuery:

 var textarea = $('#history');

I've tried (inter alia):

1. textarea.height() --> always returns 0
2. textarea.ready(function() { // wait for DOM to load
      textarea.height();
   }
3. getting scrollheight from textarea as an HTMLTextareaElement (i.e. DOM Element) --> returns 0
4. var contentSpan = textarea.wrapInner('<span>');
   var height = contentSpan.height(); --> always returns 0

Please help, I'm at my wit's end!

Answer 1

Ok, I've found a solution. Whether it's the best solution, I don't know, but it works and that, frankly, is all I care about, having spent almost a day on this issue.

Here it is for anyone who faces the same problem:

1. Select the textarea:

   var textarea = $('#history');
   

2. Get the textarea's text:

   var text = textarea.text();
   

3. Create a temporary div:

   var div = $('<div id="temp"></div>');
   

4. Set the temp div's width to be the same as the textarea. Very important else the text will be all on one line in the new temp div!:

   div.css({
      "width":"530px"
   });
   

5. Insert the text into the new temp div:

   div.text(text);
   

6. Append it to the DOM:

   $('body').append(div);
   

7. Get the height of the div:

   var divHeight = $('#temp').height();
   

8. Remove the temp div from the DOM:

   div.remove();
   

Answer 2

Had a similar issue, in my case I wanted to have an expand button, that would toggle between two states (expanded/collapsed). After searching also for hours I finally came up with this solution:

Use the .prop to get the content height - works with dynamically filled textareas and then on a load command set it to your textarea.

Get the inner height:

var innerHeight = $('#MyTextarea').prop('scrollHeight');

Set it to your element

$('#MyTextarea').height(innerHeight);

Complete code with my expand button(I had min-height set on my textarea):

$(document).on("click", '.expand-textarea', function () {
    $(this).toggleClass('Expanded');

    if($(this).hasClass('Expanded'))
      $($(this).data('target')).height(1);
    else
      $($(this).data('target')).height($($(this).data('target')).prop('scrollHeight'));
  });

Answer 3

Modern answer: textarea sizing is a few lines of ES6 implementable two primary ways. It does not require (or benefit from) jQuery, nor does it require duplication of the content being sized.

As this is most often required to implement the functionality of auto-sizing, the code given below implements this feature. If your modal dialog containing the text area is not artificially constrained, but can adapt to the inner content size, this can be a perfect solution. E.g. don't specify the modal body's height and remove overflow-y directives. (Then no JS will be required to adjust the modal height at all.)

See the final section for additional details if you really, truly only actually need to fetch the height, not adapt the height of the textarea itself.

Line–Based

Pro: almost trivial. Pro: exploits existing user-agent behavior which does the heavy lifting (font metric calculations) for you. Con: impossible to animate. Con: extended to support constraints as per my codepen used to explore this problem, constraints are encoded into the HTML, not part of the CSS, as data attributes.

/* Lines must not wrap using this technique. */
textarea { overflow-x: auto; white-space: nowrap; resize: none }

for ( let elem of document.getElementsByTagName('textarea') ) {
    // Prevent "jagged flashes" as lines are added.
    elem.addEventListener('keydown', e => if ( e.which === 13 ) e.target.rows = e.target.rows + 1)

    // React to the finalization of keyboard entry.
    elem.addEventListener('keyup', e => e.target.rows = (elem.value.match(/\n/g) || "").length + 1)
}

Scrollable Region–Based

Pro: still almost trivial. Pro: animatable in CSS (i.e. using transition), though with some mild difficulty relating to collapsing back down. Pro: constraints defined in CSS through min-height and max-height. Con: unless carefully calculated, constraints may crop lines.

for ( let elem of document.getElementsByTagName('textarea') )
    elem.addEventListener('keyup', e => {
        e.target.style.height = 0  // SEE NOTE
        e.target.style.height = e.target.scrollHeight + 'px'
    })

A shocking percentage of the search results utilizing scrollHeight never consider the case of reducing size; for details, see below. Or they utilize events "in the wrong order" resulting in an apparent delay between entry and update, e.g. pressing enter… then any other key in order to update. Example.

Solution to Initial Question

The initial question specifically related to fetching the height of a textarea. The second approach to auto-sizing, there, demonstrates the solution to that specific question in relation to the actual content. scrollHeight contains the height of the element regardless of constraint, e.g. its inner content size.

Note: scrollHeight is technically the Math.max() of the element's outer height or the inner height, whichever is larger. Thus the initial assignment of zero height. Without this, the textarea would expand, but never collapse. Initial assignment of zero ensures you retrieve the actual inner content height. For sampling without alteration, remove the height override (assign '') or preserve (prior to) then restore after retrieval of scrolllHeight.

To calculate just the height of the element as-is, utilize getComputedStyle and parse the result:

parseInt(getComputedStyle(elem).height, 10)

But really, please consider just adjusting the CSS to permit the modal to expand naturally rather than involving JavaScript at all.

Answer 4

Place this BEFORE any HTML elements.

<script src="/path/to/jquery.js"></script>

<script>
$(document).ready(function(){
var textarea = $('#history');
alert(textarea.height()); //returns correct height 
});
</script>

You obviously do not have to alert it. I was just using an easily visible example.

Answer 5

Given a textarea with an id of "history", this jQuery will return it's height:

$('#history').height()

Please see a working example at http://jsfiddle.net/jhfrench/JcGGR/

Answer 6

You can also retrieve the height in pixels by using $('#history').css('height'); if you're not planning on doing any calculations.

Answer 7

for current height in px:

height = window.getComputedStyle(document.querySelector('textarea')).getPropertyValue('height')

for current width in px:

width = window.getComputedStyle(document.querySelector('textarea')).getPropertyValue('width')

change 'textarea' to '#history' or like a css selector. or textarea, since a variable is declared to select element.