Cómo hacer que los elementos <textarea> crezcan automáticamente según su contenido

En este artículo, aprenderás cómo hacer que los elementos <textarea> de tu formulario crezcan automáticamente según su contenido utilizando HTML, CSS y JavaScript.

HTML

<textarea class="auto-resize"></textarea>
<textarea class="auto-resize"></textarea>
<textarea class="auto-resize"></textarea>

CSS

textarea {
  overflow: hidden;
  resize: none;
}

JavaScript

function autoResize() {
  const textareas = document.getElementsByClassName("auto-resize");
  for (let i = 0; i < textareas.length; i++) {
    const textarea = textareas[i];
    textarea.style.height = "auto"; // Restablece la altura para obtener el scrollHeight correcto
    textarea.style.height = textarea.scrollHeight + "px"; // Ajusta la altura al contenido
  }
}

// Agregar el evento 'input' a todos los elementos textarea con la clase "auto-resize"
const allTextareas = document.getElementsByClassName("auto-resize");
for (let i = 0; i < allTextareas.length; i++) {
  allTextareas[i].addEventListener("input", autoResize);
}

Con esta implementación, todos los <textarea> con la clase "auto-resize" crecerán automáticamente según su contenido en el formulario.