I am trying to create a message input field, using textarea. The reason I am using textarea is to be able to dynamically change the height.

To be able to dynamically change the height of the textarea and the parent divs, I have implemented this code.

The code works, just fine. To be able to use this JavaScript code I have to use min-height on the textarea. The problem is that I want to set the height of the textarea to 10px but it simply doesn’t want to work, when using min-height. I does somehow work when I use height, but then the JavaScript won’t work.

UPDATE:

I am just trying to create a field where the user can write a message and then post it. Currently the textarea is too tall in my opinion, there is no reason for it to be taller than needed. So i want the height to initially be 20px, and then be able to expand as the user types.

UPDATE UPDATE: I want to know how to set the height of the textarea to 10px or 20px, but still be able to dynamically change the height when the user types, using the javascript code i have provided

Any ideas on how to solve this? Btw, I’m not very well versed in CSS.

var areaName = "finder__input";
var textarea = document.getElementById(areaName);

textarea.addEventListener("input", function() {
  const textarea = document.querySelector("textarea");
  const textareaHeight = textarea.clientHeight;
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
});

body {
  color: #292929;
  background-color: #616f91
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 100px;
}

.finder {
  border: 1px solid #fff;
  background-color: #f6f5f0;
  border-radius: 5px;
  /* width: 722px; */
  padding: 3px;
  box-shadow: 2px 2px 1px black, -1px -1px 1px white;
}

.finder__outer {
  position: relative;
  /* width: 700px; */
  border-radius: 5px;
  min-height: 1px;
  padding: 8px;
  background-color: transparent;
  box-shadow: inset 2px 2px 5px -2px black, inset -10px -10px 5px -7px white;
}

.finder__input {
  border: none;
  resize: none;
  background-color: red;
  outline: none;
  font-size: 15px;
  letter-spacing: 1px;
  width: 100%;
  font-weight: bold;
  min-height: 10px;
  max-height: 90px;
}

<div class="container">
  <div class="finder">
    <div class="finder__outer" id="finder__outer">
      <textarea id="finder__input" class="finder__input" type="text" name="q" placeholder="Write a message..."></textarea>
    </div>
  </div>
</div>

Answer

Resize textarea height on input

This is basically similar to this jQuery related question: Resize Textarea on Input. Here’s a rewrite in vanilla JavaScript

const textareaResize = (elTextarea) => {
  elTextarea.style.height = "auto";
  const h = elTextarea.scrollHeight;
  elTextarea.style.height = `${h}px`;
};

document.querySelectorAll(".flexheight").forEach((elTextarea) => {
  elTextarea.addEventListener("input", textareaResize); // on input
  textareaResize(elTextarea); // on init
});

textarea.flexheight {
  resize: none;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  height: 1rem;
}

Starts small and increment height as user types: <br>
<textarea class="flexheight" placeholder="Write a message..."></textarea>
<br>
<textarea class="flexheight" placeholder="Write about yourself..."></textarea>

How to set textarea height using min-height?

Advertisement

Answer

Resize textarea height on input