如何为自动拉伸的textarea设置最小高度与最大高度

当然可以！你只需要结合CSS设置固定的最小/最大高度范围，再调整JavaScript逻辑来约束textarea的高度始终在这个区间内，具体实现如下：

步骤1：添加CSS样式限制基础尺寸 #

先给textarea设置最小高度、最大高度以及滚动条规则：

textarea {
  min-height: 50px;  /* 最小高度 */
  max-height: 265px; /* 最大高度 */
  overflow-y: auto;  /* 内容超过最大高度时显示滚动条 */
  resize: none;      /* 可选：禁止用户手动拖拽调整textarea大小 */
  width: 100%;       /* 可选：让textarea自适应宽度 */
  padding: 8px;      /* 可选：优化输入体验 */
  box-sizing: border-box;
}

步骤2：调整JavaScript逻辑约束高度 #

修改原有JS代码，确保textarea高度始终在50px-265px之间：

$("textarea").each(function () {
  // 初始化时取内容高度和最小高度的较大值，保证不低于50px
  const initialHeight = Math.max(this.scrollHeight, 50);
  this.style.height = `${initialHeight}px`;
}).on("input", function () {
  this.style.height = "0px"; // 重置高度以获取准确的scrollHeight
  // 取内容高度和最大高度的较小值，保证不超过265px
  const targetHeight = Math.min(this.scrollHeight, 265);
  this.style.height = `${targetHeight}px`;
});

完整示例代码 #

<style>
textarea {
  min-height: 50px;
  max-height: 265px;
  overflow-y: auto;
  resize: none;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here..."></textarea>

<script>
$("textarea").each(function () {
  const initialHeight = Math.max(this.scrollHeight, 50);
  this.style.height = `${initialHeight}px`;
}).on("input", function () {
  this.style.height = "0px";
  const targetHeight = Math.min(this.scrollHeight, 265);
  this.style.height = `${targetHeight}px`;
});
</script>

关键说明 #

• min-height 和 max-height 从CSS层面锁定了textarea的尺寸范围，即使JS逻辑出现问题，也能保证基础的尺寸约束。
• JS里重置高度为0px是为了让浏览器重新计算准确的scrollHeight，避免因内容变化导致的高度计算偏差。
• 当内容高度超过265px时，CSS的overflow-y:auto会自动显示垂直滚动条，此时textarea高度固定在265px，用户可以滚动查看全部内容。

内容的提问来源于stack exchange，提问作者Hector