JS TypeWriter Textarea 滚动效果：向上滚动，最大高度限制的自动扩展文本区域

Question

我有一个聊天机器人的文本区域。当文本区域被填满时，它想自动向上扩展，它可以扩展的最大高度应该是 100px。有办法吗？

.textbox-1{
  padding-top:100px;
  }

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <div class="text-center textbox-1">
      <input class="filter-searchbox py-2" type="search" name="search" placeholder="Search" />
     </div>

Answer 1

设置 onInput to resize the input field based on the scrollHeight 属性...

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. (Source: Above-linked MDN Webdocs.)

因此，如果 scrollHeight 高于最大值，我们将高度设置为最大值，否则，我们将高度设置为 scrollHeight。

注意：我将其更改为 textarea，因为这样可以更自然地处理从上到下流动的文本（而输入元素不能自然地处理那个）。

const tx = document.getElementsByTagName("textarea");
const maxheight = 100;
const normalheight = window.getComputedStyle(tx[0]).getPropertyValue('height').replace("px", "");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "margin-top:-3px;" + "height:" + (tx[i].scrollHeight > maxheight ? maxheight : tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.marginTop = (normalheight - this.style.height.replace("px", "")) + "px";
  this.style.height = "auto";
  this.style.height = (this.scrollHeight > maxheight ? maxheight : this.scrollHeight) + "px";
}

<div class="text-center textbox-1">
 <textarea rows="1"></textarea>
</div>

JS TypeWriter Textarea 滚动效果：向上滚动，最大高度限制的自动扩展文本区域

JS TypeWriter Scrolling Effect in Textarea: Scrolling-Up, Auto-Expanding Text Area With Maximum Height Limit

html

javascript

css

autogrow

reactjs