Textarea Auto Height

[ionurboz]

Textarea Auto Height

You may want to use such a function.

• Inserts the new line in the correct order each time. Other methods change the time to add new lines as the content gets longer, and they start adding 2 lines after a certain content.
• Also, in this function, the maximum growth height can be defined.
• This function also takes into account the border width.

Example

https://codepen.io/ionurboz/pen/RwRexRp

Code

    function textareaAutoHeight(el)
    {
      var elBorderWith = parseInt(getComputedStyle(el).borderWidth) || 0;

      el.style.height = 'auto';

      var elHeight = el.scrollHeight + (elBorderWith * 2);

      var elMaxHeight = parseInt(el.dataset.autoheight || 800);

      el.style.overflowY = 'hidden';

      if(elHeight > elMaxHeight)
      {
        elHeight = elMaxHeight;

        el.style.removeProperty('overflow-y');
      }
      el.style.height = (elHeight) + 'px';
    };