如何使用javascript限制textarea可以动态增加高度和限制最大高度？

Question

我遇到了困难，不知道如何实现。希望大家能给我一点帮助！

问题是这样的！

我正在制作一个文本区域。我希望一开始输入框的高度是36px，但是如果继续输入文字，输入框的高度可以增加到72px，但是最大高度是72px，不会随着文字的增加。高！

以上是我想要实现的，因为我刚学程序，不知道是不是可以通过CSS实现还是需要用到javascript？ 如何通过javascript实现这个需求？

感谢大家提出我的问题并帮助我。谢谢大家。

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>

Answer 1

使用换行数的简单解决方案：

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>

Answer 2

解决方案

您可以提供一个简单的oninput 事件处理程序（灵感来自https://stackoverflow.com/a/48460773/5312110），它会在每次新输入时调整您的文本区域的大小：

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

说明

在每个输入中，高度设置为文本区域的scrollHeight（文本区域完全显示其内容所占用的空间量）和 72 像素的最小值。 由于scrollHeight 包含textarea 的填充而高度不包含，所以scrollHeight 在设置为新的height 之前必须减少textarea 的填充量。 textareas 的标准填充似乎是 2 像素（= 顶部和底部总共 4 像素）。因此必须使用this.scrollHeight - 4。如果内边距为 10 像素，则会更改为 this.scrollHeight - 20 (= 2 x 10 像素)。

你的例子

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>