在动态texarea中删除文本时无法降低高度

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>

随着文本输入的增加,我的textarea会随之增加.它将达到一定高度(直到4行)然后滚动出现.删除文本时,我无法降低高度.

此外,我默认情况下无法设置单行文本.

Fiddle

下面是我想要实现的图像

Answer 1

为了以最简单的方式实现它，你应该做一些小的改变

1. position: absolute;从.inputcls和起飞.inputcls textarea。通过这样做，它们的包装器将在更改时自动调整textarea，而您不必通过代码来完成。

2. textarea使用该rows属性来设置所需的最小行数，而不是使用像素设置最小高度。

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

3. 当文本更改时，将高度设置为auto。它将调整textarea高度到它应该有的原始高度。然后你可以获取它scrollHeight并再次设置它。所以实际上你的函数应该是：

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

查看更新的 JSFiddle

顺便提一句

你写了：

另外，我无法默认设置单行文本。

使用此解决方案只需更改rows="2"为rows="1"

顺便说一句2

您不需要同时使用onkeydown和onkeyup。只使用onkeyup会更好。