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 >
  <div >
    <div  id="finder__outer">
      <textarea id="finder__input"  type="text" name="q" placeholder="Write a message..."></textarea>
    </div>
  </div>
</div>

CodePudding user response：

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

Resize textarea on input

const elTextarea =  document.querySelector("#finder__input");

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

elTextarea.addEventListener("input", textareaResize); // on input
textareaResize(); // on init

#finder__input {
  resize: none;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  height: 1rem;
}

Starts small and increment height as user types: <br>
<textarea id="finder__input"  name="q" placeholder="Write a message..."></textarea>

for multiple such elements:

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;
}

<textarea  placeholder="Write a message..."></textarea>
<br>
<textarea  placeholder="Write about yourself..."></textarea>

CodePudding user response：

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 = "10px";
  textarea.style.minHeight = textarea.scrollHeight   "px";
});

try using minHeight

CodePudding user response：

It doesn't have a min-height attribute. set height using javascript.

source