Unable to decrease the height as the text gets removed in a dynamic texarea

user_5416718 0
Viewed 484
<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>

I've textarea where it increases as the text input gets added. It will reach a certain height(until 4 rows) and then scroll appears. I am unable to decrease the height when the text is removed.

Also, I am unable to set single line text by default.

Fiddle

Below is the image which I am trying to achieve

enter image description here

css-position textarea css html javascript
3 Answers

To achieve it in the most easy way you should make some small changes

  1. Take off position: absolute; from .inputcls and .inputcls textarea. By doing this their wrapper will be adjusted automatically when the textarea change and you will not have to do it by code.

  2. Instead of setting the textarea minimun height using pixels use the rows property to set the minimal number of rows that you want.

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

  3. When the text changes set the height to auto. It will adjust the textarea height to the original height it should have. Then you can get its scrollHeight and set it again. So Actually your function should simply be:

    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";
    }
}

See updated JSFiddle

BTW

You wrote:

Also, I am unable to set single line text by default.

With this solution simply change rows="2" to rows="1"

BTW2

You dont need to use both onkeydown and onkeyup. Using only onkeyup would be better.

user_11294160

You will need to make below change :

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

from :

element.style.height = "84px";

to 

element.style.maxHeight = "84px";
user_77093280

It looks like all you need to do is change the min-height: 56px on your footerCls class to something like for example: min-height: 100px seems to show more of the element.

user_70046470
Related