如何通过JavaScript实现点击按钮后将textarea恢复为初始1行高度

核心逻辑 #

发送完成后先清空输入内容，再复用你现有的自适应高度逻辑重置高度即可，不需要额外修改原有自适应代码，兼容性更好。

完整修改后代码 #

CSS代码（和原有代码一致，建议统一最大高度避免冲突） #

.demo{
  resize:none;
  max-height:67px; /* 和JS里的最大高度数值保持一致即可 */
}

HTML代码 #

<div id="app">
  <!-- 给textarea加id方便获取元素 -->
  <textarea id="messageTextarea" 
    oninput="this.style.height=''; this.style.height = Math.min(this.scrollHeight -3 ,67)+'px'" 
    class="demo">
  </textarea>
  <br>
  <!-- 给按钮绑定点击事件 -->
  <input type="button" value="SEND" onclick="sendMessage()">
</div>

JS代码 #

function sendMessage() {
  const textarea = document.getElementById('messageTextarea')
  const sendContent = textarea.value.trim()
  // 空内容直接跳过发送
  if (!sendContent) return

  // 此处添加你实际的内容发送逻辑，比如提交后端接口等
  console.log('待发送内容：', sendContent)

  // 发送成功后重置输入框
  textarea.value = ''
  // 复用现有自适应逻辑重置高度，不需要写死高度值，后续改样式也不用调整代码
  textarea.style.height = ''
  textarea.style.height = Math.min(textarea.scrollHeight - 3, 67) + 'px'
}

注意事项 #

• 原有JS里限制的最大高度67px和CSS里写的max-height:120px数值不统一，建议调整为相同值，避免出现内容溢出或高度限制失效的问题
• 如果不想单独封装函数，也可以直接把重置逻辑写在按钮的onclick属性里，不过代码可读性会差一些，不推荐这种写法

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