3

Tengo un elemento textarea, que recibe información de una Base de Datos.El texto puede variar, puede ser de 2, 3 , 4....n filas de texto, entonces me gustaría que cuando la información obtenida en el textarea, este se ajuste automáticamente y que muestre todo el texto.

Codigo :

<table class="table table-sm mb4">
<thead>
    <tr>
        <th width="22%">Nombre </th>
        <th width="22%">Tipo </th>
        <th width="23%">Beneficios</th>
        <th width="23%">Descripcion de elementos involucrados</th>
    </tr>
</thead>
<tbody>
    @foreach ($referencia as $item)
    <tr>
        <td><textarea name="nombre[]" placeholder="... ... ...">{{$item->nombre}}</textarea></td>
        <td><textarea name="tipo[]" placeholder="... ... ...">{{$item->tipo}}</textarea></td>
        <td><textarea name="beneficio[]" placeholder="... ... ...">{{$item->beneficio}}</textarea></td>
        <td><textarea name="descipcion[]" placeholder="... ... ...">{{$item->descipcion}}</textarea></td> 
    </tr>
    @endforeach 
</tbody>

introducir la descripción de la imagen aquí

estos son datos que ingrese aleatoriamente, pero la primera fila en realidad tiene mas texto y como se ve solo esta mostrando una parte.

Objetivo:

Así me gustaría que se muestre el texto, de forma automática. introducir la descripción de la imagen aquí

4 respuestas 4

3

No es necesario establezcas un ancho en las columnas de tu tabla, ya que esto las amplia pero tus cajas contenedoras van a seguir del mismo tamaño y con el texto parcialmente oculto.

Partimos de que cada textarea puede tener un contenido longitud variada, por tanto una media fija no nos ayuda, así que podemos usar:

  • scrollHeight el cual de acuerdo con La Mozilla Developer es la medida total del contenido en un elemento considerando lo que no se visualiza por el efecto del overflow que oculta una parte del mismo.

Entonces hacemos:

  • Obtenemos todos los textarea y los almacenamos en una variable
  • Iteramos con un ciclo los elementos que almacena dicha variable
  • A cada elemento producto de la iteración que nos esta representando a los distintos textarea le vamos a dar un height
  • El height asignado va a estar delimitado por el scrollHeight que será el alto total que el propio contenido (en este caso el texto) da a su caja padre o caja contenedora
  • Para que todo lo anterior funcione adjuntamos esto a un evento del objeto window y en la función anónima agregamos todo lo ya expuesto
  • Como estamos logrando que todo el contenido sea visible entonces podemos deshabilitar la propiedad de los textarea de redimensionarse colocando esta propiedad en none

      <style>
        .cajas-texto {
          border-radius: 4px;
          margin: 10px;
          overflow: hidden;
          resize: none;
        }
      </style>
    
    <section class="tarjetas">
      <textarea class="cajas-texto">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore dicta perferendis labore omnis, aliquid, cumque ex, deleniti sapiente distinctio necessitatibus libero adipisci. Quidem qui accusantium, maiores tenetur nobis fugiat voluptates.
      </textarea>
      <textarea class="cajas-texto">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni similique totam exercitationem, minima sequi libero. Neque non pariatur quo illum quis, modi quidem tempore nobis ratione explicabo natus aliquid!</span><span>Doloremque earum magni repellat, temporibus obcaecati itaque esse commodi iure modi! Minus distinctio, numquam reiciendis et vel sint non natus, eveniet incidunt. Aut ex numquam qui, illum a facere culpa.</span>
      </textarea>
      <textarea class="cajas-texto">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Illum voluptas, error minima, veniam fugit, illo sapiente 
    
      </textarea>
    </section>
    <script>
        let area = document.querySelectorAll(".cajas-texto")
        
        window.addEventListener("DOMContentLoaded", () => {
          area.forEach((elemento) => {
            elemento.style.height = `${elemento.scrollHeight}px`
          })
        })    
    </script>

Visualmente con un resultado asi:

introducir la descripción de la imagen aquí

1
  • 1
    Cumple con lo que necesito, Muchas Gracias.
    – DAD
    el 24 abr. 2020 a las 7:35
2

Con este simple codigo se soluciona, cada vez que en textarea se haga un salto de linea se le registrara el style al textarea

$("textarea").keyup(function(){  
  var height = $(this).prop("scrollHeight")+2+"px";
  $(this).css({"height":height});
})
1

Una forma de conseguirlo es calcular con javascript la suma de altura del textarea y del scroll y aplicar este resultado a la altura del elemento.

Para el ejemplo se ha añadido una clase autoheight a los elementos textarea donde se va a aplicar. En el ejemplo se ha supuesto que no se conoce cuál va a ser el elemento más alto de la fila, de modo que recorren todos los elementos con la clase autoheight y se recoge el valor más alto para aplicarlo a todos y que tengan la misma altura. Las diferentes alturas se muestran en consola.

var newheight = 0;
$(".autoheight").each(function(){ 
   var h = $(this).height();
   var s = $(this).prop("scrollHeight");
   console.log(h + "-" + s);
   if ( (h+s) > newheight )  {
      newheight = h + s;      
   }
});
$(".autoheight").height(newheight);
textarea{  
  overflow:hidden;
  display:block;
  height:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm mb4">
<thead>
    <tr>
        <th width="22%">Nombre </th>
        <th width="22%">Tipo </th>
        <th width="23%">Beneficios</th>
        <th width="23%">Descripcion de elementos involucrados</th>
    </tr>
</thead>
<tbody>
    
    <tr>
        <td><textarea class="autoheight" name="nombre[]" placeholder="... ... ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea></td>
        <td><textarea class="autoheight" name="tipo[]" placeholder="... ... ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea></td>
        <td><textarea class="autoheight" name="beneficio[]" placeholder="... ... ..."></textarea></td>
        <td><textarea class="autoheight" name="descipcion[]" placeholder="... ... ..."></textarea></td> 
    </tr>
    
</tbody>

1
  • Su código sirve, pero tiene un pequeño problema que es que los siguientes registros en el textarea , toma el ` height` mas largo y lo hace para todos y la idea no es esa por que existían filas que solo tenían máximo 3 filas de texto. pero igual muchas gracias, puede servir para algo o alguien que busque eso, Gracias.
    – DAD
    el 24 abr. 2020 a las 7:40
0

Existe una plugin con jquery que permite agregar la opcion de autoescalado, solo necesitas jquery ya conectado a tu proyecto y el siguiente codigo js:

<!--Codigo que necesitas agregar a tu proyecto-->
$.fn.autoResize = function () {
  let e = (e) => {
    (e.style.height = ""), (e.style.height = e.scrollHeight + "px");
  };
  return this.each((t, i) => {
    (i.style.overflow = "hidden"),
      e(i),
      $(i).bind("input", (t) => {
        e(t.target);
      });
  });
};

<!--y luego lo declaras-->
 $("textarea").autoResize();
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/flatly/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textarea" class="form-control my-3" spellcheck="false"></textarea>

2
  • 1
    Saludos @emersonValenzuela, las respuestas que son solo código son consideradas de baja calidad, intenta siempre agregar una explicación de lo que tu código hace y el cómo resuelve el problema de OP, así tu respuesta será mejor recibida por la comunidad. ;)
    – Israel-ICM
    el 6 feb. 2023 a las 17:20
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 6 feb. 2023 a las 18:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.