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

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. 从.inputcls 和.inputcls textarea 中删除position: absolute;。通过这样做，它们的包装器将在 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";
       }
   }
   

见updated JSFiddle

顺便说一句

你写道：

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

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

BTW2

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

Answer 2

您需要进行以下更改：

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

来自：

element.style.height = "84px";

到

element.style.maxHeight = "84px";

Answer 3

看起来您需要做的就是将footerCls 类上的min-height: 56px 更改为例如：min-height: 100px 似乎显示了更多元素。