Espansione di un'area di testo in base alla quantità di testo che contiene (jquery)

Question

Come è possibile ottenere inizialmente un'area di testo con una sola riga, ma quando il testo raggiunge la fine della riga per aggiungere un'altra riga e continuare a farlo questo fino a un massimo di 5 righe?

Answer 1

Qualcosa di simile a questo:

<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/

modificare lievi miglioramenti per gestire nuove righe:

$(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

Controllare il jQ Elastic plug-in: http://unwrongest.com/projects/elastic/

Puoi usare la proprietà di altezza massima sul tuo CSS combinato con la lunghezza massima della tua textarea per limitarla a 5 righe.

Answer 3

scaricare questo 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 fornisce una descrizione approfondita, passo-passo su come attuare al meglio questa funzionalità.

Answer 5

Ho preso l'idea dalla risposta di Jake Feasel e non solo funziona per l'espansione ma anche per il contratto dell'area di testo nel caso in cui ci sia un contenuto minore.

HTML

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

Viene inoltre visualizzato il numero di righe ideale richiesta in base al contenuto in un div sepatate

CSS

​#foo 
{ 
resize:none;   
}​ 

Questo è necessario perché, una volta che la textarea ha stato ridimensionato utilizzando questo gestore, il codice smette di funzionare

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);      

    }); 

});​ 

Demo: http://jsfiddle.net/roopunk/xPdaP/3/

Avviso che si occupa anche della barra di scorrimento che si apre tra il keyDown e keyUp. IMO: è un po 'bugging.

Nota Spero che questo aiuti! :)