如何实现textarea加载适配内容尺寸且输入自动扩展？解决JS代码冲突

嘿，我来帮你搞定这个textarea高度适配的问题！你遇到的问题大概率是两段代码的逻辑没有打通——初始化的高度设置和自动扩展的事件没有联动，导致其中一方覆盖了另一方的效果。咱们把逻辑整合一下，让两者完美配合：

核心思路 #

1. 封装一个通用的高度调整函数，让初始化和输入时都复用同一逻辑，避免冲突
2. 页面加载时先调用函数，让textarea适配已有内容
3. 绑定内容变化事件，实时调整高度
4. 保留原有的focus初始化逻辑，用来处理边界情况（比如内容为空时的基准高度）

完整整合代码 #

// 封装通用的textarea高度调整函数
function adjustTextareaHeight(textarea) {
  // 先重置高度为auto，确保内容减少时能自动收缩（可选，不需要可以删掉这行）
  textarea.style.height = 'auto';
  // 设置高度为内容实际占据的scrollHeight
  textarea.style.height = textarea.scrollHeight + 'px';
}

$(document).ready(function() {
  // 初始化：页面加载后，让所有带autoExpand类的textarea适配已有内容
  $('textarea.autoExpand').each(function() {
    adjustTextareaHeight(this);
    // 提前设置基准滚动高度，避免focus事件重复计算
    this.baseScrollHeight = this.scrollHeight;
  });

  // 绑定内容变化事件：输入/按键时自动调整高度
  $(document).on('input.autoExpand keyup.autoExpand', 'textarea.autoExpand', function() {
    adjustTextareaHeight(this);
  });

  // 保留原有的focus初始化逻辑，处理内容为空时的基准高度（只触发一次）
  $(document).one('focus.autoExpand', 'textarea.autoExpand', function() {
    // 如果之前没设置过基准高度，再执行原逻辑
    if (!this.baseScrollHeight) {
      const savedValue = this.value;
      this.value = '';
      this.baseScrollHeight = this.scrollHeight;
      this.value = savedValue;
    }
  });
});

关键细节说明 #

• 封装函数adjustTextareaHeight：确保初始化和输入时的高度计算逻辑完全一致，不会出现前后矛盾
• 初始化时提前设置baseScrollHeight：避免原focus事件里清空内容的操作影响已有的文本
• 绑定input和keyup事件：覆盖所有内容变化的场景（比如粘贴、输入法输入等）
• 可选的style.height = 'auto'：如果希望内容减少时textarea高度能自动收缩，就保留这行；如果只需要扩展不需要收缩，可以删掉

额外建议 #

给你的textarea加个min-height和max-height的CSS样式，这样既不会太矮，也不会无限扩展：

textarea.autoExpand {
  min-height: 60px;
  max-height: 300px;
  resize: none; /* 可选，禁用手动调整大小 */
}

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