Impossible de réduire la hauteur au fur et à mesure que le texte est supprimé dans un fichier texas dynamique

Question

<div class="mainContainer"> 
    <div class="container"> 
    <div class="content"></div> 
    </div> 
    <div class="footerCls"> 
    <div class="inputcls"> 
     <textarea name="text" placeholder="Text goes here..." onkeydown="expand(event,this)" onkeyup="expand(event,this)"></textarea> 
     <div class="wc-commands" id="wc-commands"> 
     <svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 22 22" version="1.1"> 
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
      <g transform="translate(-263.000000, -18.000000)"> 
       <g> 
       <g transform="translate(264.000000, 19.000000)"> 
        <path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Shape" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
        <circle id="Oval-2" fill="#D2D2D2" cx="10" cy="15" r="1"></circle> 
        <circle id="Oval" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="10" cy="10" r="10"></circle> 
       </g> 
       </g> 
      </g> 
      </g> 
     </svg> 
     </div> 
     <div class="wc-send" id="wc-send"> 
     <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="20px" viewBox="0 0 24 20" version="1.1"> 
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> 
      <g transform="translate(-320.000000, -19.000000)" stroke="#FFFFFF" stroke-width="2"> 
       <g> 
       <g transform="translate(321.000000, 20.000000)"> 
        <polygon points="22 0 19 18 10 12 0 9"></polygon> 
        <path d="M9.5,11.5 L21.5,0.5"></path> 
        <polyline points="10 12 10 18 14 15"></polyline> 
       </g> 
       </g> 
      </g> 
      </g> 
     </svg> 
     </div> 
    </div> 
    </div> 
</div> 
<script> 
    function expand(e, element) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    var element2 = document.getElementsByClassName("footerCls")[0]; 
    if (code != 13) { 
     if (element.scrollHeight < 84) { 
     element2.style.height = (element.scrollHeight) + "px"; 
     element.style.height = (element.scrollHeight) + "px"; 
     element.style.overflowY = "hidden"; 
     } else { 
     element2.style.height = "125px"; 
     element.style.height = "84px"; 
     element.style.overflowY = "scroll"; 
     } 
    } else { 
     element2.style.height = "56px"; 
     element.style.height = "30px"; 
     element.value = ""; 
     element.style.overflowY = "hidden"; 
    } 
    } 

</script> 

J'ai une zone de texte où elle augmente à mesure que l'entrée de texte est ajoutée. Il atteindra une certaine hauteur (jusqu'à 4 lignes) puis apparaîtra. Je suis incapable de diminuer la hauteur lorsque le texte est supprimé.

En outre, je ne parviens pas à définir le texte d'une seule ligne par défaut.

Fiddle

est Ci-dessous l'image que je suis en train de réaliser

Answer 1

Pour y parvenir la manière la plus facile, vous devriez faire quelques petits changements

1. Enlever position: absolute; de .inputcls et .inputcls textarea. En faisant cela, leur emballage sera ajusté automatiquement lorsque le textarea changera et vous n'aurez pas à le faire par code. Au lieu de définir la hauteur minimale textarea en utilisant des pixels, utilisez la propriété rows pour définir le nombre minimal de lignes souhaité. Au lieu de textarea, utilisez la propriété rows.

   <textarea rows="2"></textarea> 
   

2. Lorsque le texte change régler la hauteur de auto. Il ajustera la hauteur textarea à la hauteur d'origine qu'il devrait avoir. Ensuite, vous pouvez obtenir son scrollHeight et le définir à nouveau. Donc en fait votre fonction doit être simplement:

   function expand(e, element) { 
       element.style.height = "auto"; 
   
       if (element.scrollHeight <= 84) { 
        element.style.height = element.scrollHeight + "px"; 
        element.style.overflowY = "hidden"; 
       } else { 
        element.style.height = "84px"; 
        element.style.overflowY = "scroll"; 
       } 
   } 
   

Voir updated JSFiddle

BTW

Vous avez écrit:

Aussi, je ne peux pas mettre seul texte de la ligne par défaut.

Avec cette solution tout simplement changer rows="2" à rows="1"

BTW2

Vous ne devez utiliser les deux onkeydown et onkeyup. En utilisant seulement onkeyup serait mieux.

Answer 2

Vous aurez besoin de faire ci-dessous le changement:

<script> 
    function expand(e, element) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    var element2 = document.getElementsByClassName("footerCls")[0]; 
    if (code != 13) { 
     if (element.scrollHeight < 84) { 
     element2.style.height = (element.scrollHeight) + "px"; 
     element.style.height = (element.scrollHeight) + "px"; 
     element.style.overflowY = "hidden"; 
     } else { 
     element2.style.height = "125px"; 
     **element.style.height = "84px";** 
     element.style.overflowY = "scroll"; 
     } 
    } else { 
     element2.style.height = "56px"; 
     element.style.height = "30px"; 
     element.value = ""; 
     element.style.overflowY = "hidden"; 
    } 
    } 

</script> 

de:

element.style.height = "84px"; 

à

element.style.maxHeight = "84px"; 

Answer 3

Il semble que tout ce que vous devez faire est de changer le min-height: 56px sur votre classe footerCls pour quelque chose comme par exemple: min-height: 100px semble montrer plus de l'élément.