Expandir un área de texto en función de la cantidad de texto que contiene (jquery)

Question

¿Cómo puedo obtener un área de texto para inicialmente tener solo 1 fila, pero luego cuando el texto llega al final de la fila para agregar otra fila y seguir haciendo esto hasta un máximo de 5 filas?

Answer 1

Algo como esto:

<textarea id="foo" rows="1" cols="40"></textarea> 

$(function() { 

    $("#foo").on("keyup", function() { 

     if ($(this).attr('rows') < 5 && 
      parseInt($(this).val().length/$(this).attr('cols')) >= $(this).attr('rows')) 
      $(this).attr("rows", parseInt($(this).attr("rows"))+1); 

    }); 

}); 

http://jsfiddle.net/Q3pPT/

edición Ligeras mejoras para manejar los saltos de línea:

$(function() { 

    $("#foo").on("keyup", function (e) { 

     if ($(this).attr('rows') < 5) 
     { 
      if (
       parseInt($(this).val().length/$(this).attr('cols'))+ 
       ($(this).val().split("\n").length-1) 

       >= 

       $(this).attr('rows') 
      ) 
       $(this).attr("rows", parseInt($(this).attr("rows"))+1); 

      if (e.keyCode == 13) 
      { 
       $(this).attr("rows", parseInt($(this).attr("rows"))+1); 
      } 
     } 

    }); 

}); 

http://jsfiddle.net/Q3pPT/2/

Answer 2

Compruebe el elástico jQ uery plugin: http://unwrongest.com/projects/elastic/

Puede usar la propiedad max-height en su CSS combinada con la longitud máxima de su área de texto para limitarla a 5 líneas.

Answer 3

descargar este plugin: http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js

$('textarea#comment').autoResize({ 
    // On resize: 
    onResize : function() { 
     $(this).css({opacity:0.8}); 
    }, 
    // After resize: 
    animateCallback : function() { 
     $(this).css({opacity:1}); 
    }, 
    // Quite slow animation: 
    animateDuration : 300, 
    // More extra space: 
    extraSpace : 40 
}); 

Answer 4

This A List Part article da una descripción detallada, paso a paso sobre cómo implementar mejor esta funcionalidad.

Answer 5

Tomé la idea de la respuesta de Jake Feasel y no solo funciona para expandir sino también para contratar el área de texto en caso de que haya un menor contenido.

HTML

<textarea id="foo" rows="1" cols="40"></textarea> 
<div id="stat"></div> 

También muestra el número ideal de filas requerido de acuerdo con el contenido en un div sepatate

CSS

​#foo 
{ 
resize:none;   
}​ 

Esto es necesario porque, una vez que el área de texto tiene se ha redimensionado utilizando este controlador, el código deja de funcionar

JS

$(function() { 

    $("#foo").on("keyup", function (e) {  
     var idealRows = parseInt($(this).val().length/$(this).attr('cols'))+ 
       ($(this).val().split("\n").length-1)+1 ; 
     var rows = $(this).attr('rows'); 

     // for the bugging scroll bar 
     if(rows > 4) $('#foo').css('overflow','auto') 
     else $('#foo').css('overflow','hidden') 

     // for expanding and contracting   
     if((idealRows > rows) && (rows < 5) || (idealRows < rows) && (rows > 1)) 
      $(this).attr("rows", idealRows);      

    }); 

});​ 

Demostración: http://jsfiddle.net/roopunk/xPdaP/3/

Tenga en cuenta que también se encarga de la barra de desplazamiento que aparece entre keyDown y keyUp. OMI: Es un poco molesto.

Nota Espero que esto ayude! :)