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

Question

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>

Keshav Bajaj · Answer 1 · 2021-08-08T13:54:15.957

1

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>

edited Aug 08 '21 at 13:54

answered Aug 08 '21 at 12:34

Keshav Bajaj

863
1
5
13

Thank you for your help, I will try to understand and absorb it again. However, it seems to continue to input text at present, the textarea input box will continue to increase in height, unless you need to press enter, it will limit the increase in height. I would like to ask if you can re-enter the text without pressing enter, but if it exceeds four lines, it will not increase. Height? – WEI A Aug 08 '21 at 13:33
You can use `wrap='off'` to prevent text-wrapping which will solve the problem. – Keshav Bajaj Aug 08 '21 at 13:55

Peter Lehnhardt · Answer 2 · 2021-08-08T20:57:21.040

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>

Hello~ May I ask this.scrollHeight-4 This means that if I want the text to be displayed only 4 lines, I will enter -4. If I want to present 6 lines today, I will write -6. Does this mean? After searching on the Internet, I still don’t understand why it is realized by subtraction? — WEI A, Aug 08 '21 at 13:35
It turns out that the minus sign means you need to subtract the padding of the textarea, thank you for letting me learn a lesson — WEI A, Aug 09 '21 at 02:10

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

2 Answers2

Solution

Explanation

Your example