Expandable Textarea

gistfile1.txt

/**
 * Expands a textarea element to fit its content up to a maximum height.
 * @param {string} id - The id of the textarea element.
 * @param {number} [maxHeight=0] - The maximum height of the textarea element. 0 for no maximum.
 * @author Christoph Khouri <christoph.khouri@gmail.com>
 */
function expandableTextarea(id, maxHeight = 0) {
  const textarea = document.getElementById(id);
  textarea.style.height = 'auto';
  textarea.style.height = (textarea.scrollHeight) + 'px';

  textarea.addEventListener('input', function () {
    if (maxHeight == 0 || this.scrollHeight <= maxHeight) {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight) + 'px';
    } else {
      this.style.height = 'auto';
      this.style.height = maxHeight + 'px';
    }
  });
}