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

Question

I have a text area for a chatbot. when the text area gets filled it wants to auto expand upwards and max height it can expand should be 100px. Is there anyway to do this?

.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

Set the onInput to resize the input field based on the scrollHeight attribute...

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

So, if the scrollHeight is above the max, we set the height to max, otherwise, we set the height to scrollHeight.

Note: I changed it to a textarea since that works more naturally with text flowing from top to bottom (whereas an input element doesn't work naturally with that).

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>