Spécifiez le nombre de lignes de textarea en fonction du contenu. HTML, Javascript

Question

Salut J'ai une fonction pour augmenter le nombre de rangées d'une zone de texte lorsque l'utilisateur tape dessus, donc cela fonctionne bien. Mais lorsque le formulaire amène le texte dans la zone de texte alors que l'utilisateur ne saisit pas, il n'augmente pas le nombre de lignes, mais il affiche uniquement le nombre de lignes défini au début (rows = "1"), comme j'ai besoin c'est le plus petit nombre de rangées.

Je ne sais pas quelle fonction Javascript (pas de JQuery) doit s'appliquer à la zone de texte afin de développer le nombre de lignes, quand l'utilisateur saisit, et quand le formulaire affiche un texte multi-lignes dans la zone de texte, donc il utilisera toujours le nombre minimum de lignes.

Toute aide serait appréciée.

S'il vous plaît n'hésitez pas à changer de fonction que j'ai complètement.

par ex.

<script type="text/javascript"> 
function changeTextAreaLength(e){ 
    var txtLength = e.value.length; 
    var numRows = 0 ; 
    var arrNewLines = e.value.split("\n"); 

    for(var i=0; i<=arrNewLines.length-1; i++){ 
     numRows++; 
     if(arrNewLines[i].length > e.cols-5) { 
      numRows += Math.floor(arrNewLines[i].length/e.cols) 
     } 
    } 
     if(numRows < 1) { 
      e.cols = (txtLength % e.cols) + 1 >= e.cols ? ((txtLength % e.cols) + 1) : e.cols ; 
     }else{ 
      e.cols = e.cols ;  
      e.rows = numRows; 
     } 
} 
</script> 


<textarea id="textarea1" rows="1" onkeyup="javascript:changeTextAreaLength(this);" /> 

Answer 1

Ouais, keyup est pas assez pour attraper tous les moyens le contenu d'une entrée peut changer. Il y a aussi un clic droit sur couper/copier/coller, annuler/refaire, glisser/déposer et corriger l'orthographe à considérer avant même d'arriver aux changements par script.

Vous n'avez aucun espoir d'attraper tous ces cas, donc si vous voulez une réaction générale en temps réel aux changements, vous n'avez pas d'autre choix que de l'interroger (par exemple en utilisant un intervalle). Vous pouvez également ajouter des clés si vous voulez attraper le cas courant de la saisie avec un délai plus rapide que celui de l'interrogateur.

Une alternative au comptage de caractères que vous pourriez également envisager serait de vérifier le scrollHeight pour voir si la zone de texte a commencé à défiler. par exemple. quelque chose comme:

<textarea id="q" rows="4" cols="80">hello</textarea> 
<script type="text/javascript"> 
    function stretchy(element) { 
     var value= element.value; 
     function update() { 
      var h= element.scrollHeight; 
      if (h>element.offsetHeight || h<element.offsetHeight-48) 
       element.style.height= (h+24)+'px'; 
     } 
     element.onkeyup= update; 
     setInterval(update, 1000); 
     update(); 
    } 

    stretchy(document.getElementById('q')); 
</script> 

Answer 2

D'abord, changez "fucntion" en "fonction". Ensuite, supprimez le "javascript:" de votre attribut onkeyup. Troisièmement, vous appelez changeTextAreaLength() mais votre fonction s'appelle expandtextarea(). Quatrièmement, votre fonction dit expandtextarea (obj) mais vous faites référence à e, non obj, dans la fonction.

<textarea id="textarea1" rows="1" onkeyup="expandtextarea(this);" />