Question

我是一个textarea，其中textarea的高度将根据文本内部的长度动态增加。一旦达到200px的高度，就会出现scoll。不知何故，我在滚动出现后删除文本时无法降低高度。即使内容未被完全占用，高度仍保持不变。

我正在尝试与https://www.intercom.com/聊天中的textarea（动态）匹配。

HTML＆amp; JS

  <div class="container">
      <textarea placeholder="Text goes here..." onkeydown="expand(this)" onkeyup="expand(this)"></textarea>
    </div>
    <script>
      function expand(element) {
        if (element.scrollHeight < 200) {
          element.style.height = "0px";
          element.style.height = (element.scrollHeight) + "px";
        } else {
          element.style.height = "200px";
          element.style.overflowY = "auto";
        }
      }

    </script>

CSS

.container {
  min-height: 16px;
  max-height: 200px;
  width: 300px;
}

.container textarea {
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  color: #565867;
  background-color: #f4f7f9;
  resize: none;
  //border: none;
  overflow: hidden;
  font-size: 14px;
  width: 100%;
  height: 100%;
}

Fiddle here

Answer 1

更改以下代码以使其正常工作

.container {
  min-height:18px;
  max-height: 200px;
  width: 300px;
}

进入

.container {
  height:18px;
  max-height: 200px;
  width: 300px;
}

无法将动态高度设置为textarea

1 个答案: