How to use javascript to limit the textarea can dynamically increase the height and limit the maximum height?

user_15807056 0
Viewed 166

I have encountered a difficulty and don't know how to achieve it. I hope everyone can give me a little help!

The problem is this!

I'm making a textarea. I hope that the height of the input box will be 36px at the beginning, but if the text continues to be input, the height of the input box can be increased to 72px, but the maximum height is 72px, and it will not increase with the increase of text. high!

The above is what I want to achieve, because I am just learning the program, I don’t know if this can be done through CSS or I need to use javascript? How to achieve this requirement through javascript?

Thank you all for coming to my question and for helping me. Thank you all.

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  width: 600px;
  padding: 16px;
  border: 1px solid #222;
}
.demo .tool {
  display: flex;
  list-style-type:none;
}
.demo .tool li {
  padding: 16px;
  background-color: #ccc;
  border: 1px solid #222;
}
.demo .chat {
  margin-top: 16px;
  width: 600px;
  height: 36px;
}
.demo .tool__footer {
  margin: 16px;
}
.demo .tool__footer .send {
  text-decoration: none;
  padding: 8px;
  background-color: #f9cf5a;
  color: #222;
  border-radius: 6px;
}
<div class="demo">
  <div class="wrap">
     <ul class="tool">
        <li>photo</li>
        <li>file</li>
        <li>example</li>
     </ul>
    <textarea class="chat"></textarea>
    <div class="tool__footer">
       <input type="checkbox" id="enter"><label for="enter">ENTER</label>
       <a type="text" class="send" href="javascript:;">send</a>
    </div>
  </div>
</div>

enter image description here

css javascript
2 Answers

A simple solution using number of line breaks:

function newHeight(value) {
  let linebreaks = (value.match(/\n/g) || []).length-1
  // min-height + (lines * line-height) + padding + border
  let height = 36 + (linebreaks * 20)
  return height;
}

let textarea = document.querySelector(".chat");
textarea.addEventListener("input", () => {
  let height = newHeight(textarea.value);
  // If less that 36 set 36
  if (height<36){
  textarea.style.height = '36px'
  } else {
   // Else set height until it reaches 72 px
    textarea.style.height = height >72 ?"72px" :height + "px";
  }
});
.chat{
height:36px;
/* A transition to make it smoother */
transition:all 0.2s;
}
<!-- You can use wrap="off" which will make rows=newlines -->
<textarea wrap="off" class="chat"></textarea>

user_164361770

Solution

You can supply a simple oninput event handler (inspired from https://stackoverflow.com/a/48460773/5312110) which resizes your textarea on every new input:

<textarea class="chat" oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight - 4, 72) + 'px'"></textarea>

Explanation

On each input the height is set as the minimum of the scrollHeight of the textarea (the amount of space the textarea would occupy to completely show its content) and 72 pixels. Since scrollHeight includes the textarea's padding and height does not, scrollHeight must be reduced by the amount of padding of the textarea before setting it as new height. The standard padding for textareas seems to be 2 pixels (= 4 pixels total for top and bottom). Therefore this.scrollHeight - 4 has to be used. If the padding would be 10px it would change to this.scrollHeight - 20 (= 2 x 10px).

Your example

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  width: 100%;
  padding: 16px;
  border: 1px solid #222;
  box-sizing: border-box;
}
.demo .tool {
  display: flex;
  list-style-type:none;
}
.demo .tool li {
  padding: 16px;
  background-color: #ccc;
  border: 1px solid #222;
}
.demo .chat {
  margin-top: 16px;
  width: 100%;
  height: 36px;
}
.demo .tool__footer {
  margin: 16px;
}
.demo .tool__footer .send {
  text-decoration: none;
  padding: 8px;
  background-color: #f9cf5a;
  color: #222;
  border-radius: 6px;
}
<div class="demo">
  <div class="wrap">
     <ul class="tool">
        <li>photo</li>
        <li>file</li>
        <li>example</li>
     </ul>
    <textarea class="chat" oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight - 4, 72) + 'px'"></textarea>
    <div class="tool__footer">
       <input type="checkbox" id="enter"><label for="enter">ENTER</label>
       <a type="text" class="send" href="javascript:;">send</a>
    </div>
  </div>
</div>

user_53121100
Related