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

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>

我有文本区域，它随着文本输入的添加而增加。它会达到一定高度（直到 4 行），然后出现滚动。删除文本后无法降低高度。

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

Fiddle

下面是我想要达到的效果

Answer 1

您需要进行以下更改：

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

要以最简单的方式实现它，您应该进行一些小的更改

从.inputcls和.inputcls textarea起飞position: absolute;。通过这样做，它们的包装器将在 textarea 更改时自动调整，您不必通过代码来完成。
不要使用像素设置 textarea 最小高度，而是使用 rows 属性设置所需的最小行数。
```
<textarea rows="2"></textarea>
```

当文本更改时将高度设置为 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

顺便说一句

您写道：

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

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

BTW2

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

Answer 3

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

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

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

html

javascript

css

textarea

css-position