Cómo crear un textarea que se redimensione en altura al escribir con jQuery

Un textarea que se redimensione automáticamente es un elemento la mar de usable. Este tipos de textareas crecen en altura basándose en el contenido que introduzcas. Si tu formulario web contiene un textarea, puedes hacer que sea auto redimensionable para que se adapte al contenido utilizando únicamente jQuery.

Existen muchos plugins third-party para jQuery para crear este tipo de campos. Pero si lo que quieres es desarrollar uno por tu cuenta, puedes hacerlo simplemente mediante algo de código jQuery. Además, no es muy dificil.

Nuestro código de ejemplo ilustra cómo crear un textarea que se redimensione en altura mediante jQuery. Cuando se inserte contenido en el textarea, al altura de este se expandirá automáticamente basándose en lo escrito. Por lo tanto, y resumiendo, la altura del textarea se ajustará al contenido y su scrollbar no será visible al usuario.

Textarea auto redimensionable

Antes que nada, incluye la librería jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Código HTML

Añade el textarea que quieras utilizar para este propósito.

<textarea id="content"></textarea>

Código Javascript

El siguiente código hace que el textarea sea autoajustable utilizando jQuery.

• En la carga de la página, crearemos un clon oculto del elemento DIV y añadiremos una clase al textarea
• Cuando el usuario comience a escribir, colocaremos el contenido del textarea al DIV clon
• Aplicamos la altura del DIV clon sal textarea
• Debes definir el selector del elemento (#content) en el textarea

<script>
$(function(){
    var textArea = $('#content'),
    hiddenDiv = $(document.createElement('div')),
    content = null;
    
    textArea.addClass('noscroll');
    hiddenDiv.addClass('hiddendiv');
    
    $(textArea).after(hiddenDiv);
    
    textArea.on('keyup', function(){
        content = $(this).val();
        content = content.replace(/n/g, '<br>');
        hiddenDiv.html(content + '<br class="lbr">');
        $(this).css('height', hiddenDiv.height());
    });
});
</script>

Código CSS

<style>
textarea{
  width: 500px;
  min-height: 50px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #444;
  padding: 5px;
}
.noscroll{
  overflow: hidden;
  resize: none;
}
.hiddendiv{
  display: none;
  white-space: pre-wrap;
  width: 500px;
  min-height: 50px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 5px;
  word-wrap: break-word;
}
.lbr {
  line-height: 3px;
}
</style>