如何用JavaScript实现textarea高度动态增长且限制最大高度

1 调整CSS基础样式 #

首先修改原有.demo .chat的样式，补充高度限制、盒模型和溢出规则：

.demo .chat {
  margin-top: 16px;
  width: 600px;
  height: 36px;
  max-height: 72px; /* 新增：最大高度限制 */
  box-sizing: border-box; /* 新增：避免内边距/边框撑高元素 */
  overflow-y: auto; /* 新增：内容超出最大高度后显示滚动条 */
  resize: none; /* 可选：禁止用户手动拖拽调整大小 */
}

2 编写JavaScript交互逻辑 #

监听textarea的输入事件，动态调整高度：

// 获取textarea元素
const chatTextarea = document.querySelector('.chat');
// 初始高度、最大高度和CSS配置保持一致
const MIN_HEIGHT = 36;
const MAX_HEIGHT = 72;

chatTextarea.addEventListener('input', function() {
  // 先重置高度为最小值，保证删除内容时高度可以回缩
  this.style.height = MIN_HEIGHT + 'px';
  // 获取内容实际需要的高度
  const scrollHeight = this.scrollHeight;
  // 实际高度不超过最大值时，动态设置高度
  if (scrollHeight <= MAX_HEIGHT) {
    this.style.height = scrollHeight + 'px';
  } else {
    this.style.height = MAX_HEIGHT + 'px';
  }
});

实现效果 #

#

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