textarea自适应高度需监听input事件并动态设置height为scrollheight，禁用resize和overflow:hidden，添加min-height与max-height，注意表单验证和框架中正确清理事件监听。
textarea 自适应高度的关键是监听 input 事件，不是 resize 或 keyup
原生 textarea 不会自动撑高，靠 CSS 的 height: auto 没用。必须用 JS 监听用户输入后动态调整 scrollHeight。用 resize 事件完全无效——它只响应手动拖拽边框；用 keyup 会漏掉粘贴、右键粘贴、拖入文本等操作。
实操建议：
- 绑定
input事件（兼容所有输入方式，包括 IME 输入） - 每次触发时重置
textarea.style.height = 'auto'，再设为scrollHeight + 'px'，避免高度累积 - 加个最小高度（如
min-height: 80px），防止内容为空时塌陷 - 移动端注意：iOS Safari 中
scrollHeight在软键盘弹出后可能不准，可加setTimeout(..., 0)延迟读取
CSS 需禁用 resize 和 overflow，否则破坏自适应逻辑
如果 textarea 允许拖拽（resize: both）或设置了固定 overflow，JS 算出的 scrollHeight 就会失真。特别是 overflow: hidden 会让内容被截断却不触发滚动，scrollHeight 反而变小。
正确写法示例：
textarea {
min-height: 80px;
max-height: 240px; /* 防止无限撑高 */
width: 100%;
resize: none; /* 必须关掉 */
overflow: auto; /* 允许滚动，但仅在超出 max-height 时出现 */
box-sizing: border-box;
}
注意：max-height 是安全阀，没它的话长文本会让页面布局崩掉。
HTML5 表单验证失败时，自适应高度容易错位
当 textarea 触发 :invalid 状态（比如 required 未填），浏览器可能插入验证提示或改变渲染盒模型，导致 scrollHeight 计算偏移。常见现象是高度突然多出 1–2 行空白。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
应对方法：
- 验证状态变化后手动触发一次重设高度（监听
invalid和input两个事件） - 避免在
:invalid样式里改padding或line-height，这些会影响scrollHeight - 若用了
placeholder，确保其字体大小与 textarea 一致，否则空值时高度计算偏差
Vue/React 项目中别直接操作 DOM，用 ref + useEffect/useEffect
在框架里硬写 document.querySelector('textarea').addEventListener 容易内存泄漏或更新不同步。应该用响应式 ref 绑定元素，再在生命周期钩子中处理。
React 示例（useEffect）：
useEffect(() => {
const ta = textareaRef.current;
if (!ta) return;
const adjustHeight = () => {
ta.style.height = 'auto';
ta.style.height = Math.min(ta.scrollHeight, 240) + 'px';
};
ta.addEventListener('input', adjustHeight);
return () => ta.removeEventListener('input', adjustHeight);
}, []);
关键点：清理函数不能少；Math.min 限制上限；不要在 render 内调用 scrollHeight（会触发 layout thrashing）。
真正难的不是让高度变高，而是让高度「稳住」——换行、删空行、输入中文标点、软键盘收起，每个环节都可能让 scrollHeight 抖动一像素。多测几轮 iOS + Android + Chrome DevTools 设备模拟器，比写十行注释管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
