ajouter une nouvelle ligne à l'entrée textarea lors de l'édition

Question

Je me demande comment ajouter une nouvelle ligne/ligne à textarea pendant l'édition c'est quand le nombre de lettres dépasse le nombre de cols de la zone de texte ajouter automatiquement une nouvelle ligne.

Answer 1

Une partie du code de base pour y parvenir, testé dans ce jsFiddle (http://jsfiddle.net/NZbZn/). Il aura besoin de travail, évidemment, mais montre le concept de base.

jQuery(document).ready(function(){ 

    //after typing occurs 
    jQuery('textarea#expander').keyup(function(){ 

     //figure out how many chars 
     var length = jQuery(this).val().length; 

     //if more than 10 
     if(length > 10){ 

      //if the modulus 10 of the length is zero, there are a multiple of 10 chars, so we need to extend by a row 
      //(NOTE the obvious problem - this will expand while deleting chars too!) 
      if((length % 10) == 0){ 

       //figure out the number of rows, increment by one, and reset rows attrib 
       var rows = jQuery(this).attr('rows'); 
       rows++; 

       jQuery(this).attr('rows', rows);  
      } 
     } 
    });  
}); 

Encore une fois cependant, considérons les implications de l'interface utilisateur en premier.

Answer 2

Vous pouvez utiliser jQuery AutoResize Plugin: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Answer 3

Vous pouvez faire quelque chose comme ceci:

<textarea id="ta" onkeyup="checkScroll(this)" style="height:4em; overflow:auto"> 
asdf 
</textarea> 

<script> 
function checkScroll(obj) { 
    if(obj.clientHeight < obj.scrollHeight) { 
    obj.style.height = (parseInt(obj.style.height)+1) + 'em'; 
    } 
} 
</script> 

Et vous pouvez ajouter une limite de hauteur dans le « si » état si vous voulez.

(. Ne vous inquiétez pas de faire ce discret - il suffit d'obtenir le point à travers)

Answer 4

essayer

var txt = $ ("# textarea idhere");
txt.val (txt.val() + "\ nQuelque chose ici \ n \ nAgain");

Answer 5

$('textarea').keyup(function (e) { 
    var rows = $(this).val().split("\n"); 
    $(this).prop('rows', rows.length); 
});