textarea需用JS监听input和paste事件，先设height为auto再读scrollHeight，并加min/max-height限制；input无法自适应高度；fit-content对textarea无效；移动端需处理软键盘遮挡。
textarea 怎么让高度随内容自动撑开
直接用 textarea 原生不支持自动高度，必须靠 JS 监听输入并重设 style.height，否则会固定行数、内容溢出或出现滚动条。
常见错误是只监听 input 事件却忽略粘贴（paste）、回车、删除等操作；更坑的是没重置 height 再计算，导致越输越高停不下来。
- 监听
input和paste两个事件，paste后加setTimeout确保 DOM 更新完成再计算 - 每次计算前先设
style.height = 'auto'，再读scrollHeight，避免缓存旧高度 - 加上
min-height和max-heightCSS 限制，防止内容过长撑爆布局
textarea {
min-height: 40px;
max-height: 200px;
resize: none;
overflow: hidden;
}
input[type="text"] 能不能也自适应高度
不能。原生 input 是单行元素，没有换行概念，scrollHeight 始终等于自身高度，强行套 textarea 的逻辑会失效。
如果真需要多行+自动高度的「输入框」，就该换用 textarea 并隐藏滚动条，而不是硬改 input。有些框架（如 React）里误用 contenteditable div 模拟，但带来光标、选区、移动端兼容等一堆新问题。
- 别给
input绑scrollHeight计算——它永远不变 - 移动端软键盘弹起时，
textarea可能被遮挡，需监听focus手动 scrollIntoView - 若必须单行体验，用 CSS
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;更稳妥
用 CSS 的 height: fit-content 行不行
不行。height: fit-content 对 textarea 无效，浏览器根本不识别它在替换元素上的行为；对普通块级元素有效，但 textarea 是表单控件，渲染机制不同。
有人试过把 textarea 包进 div，对 div 设 fit-content，结果只是 div 高度自适应，textarea 仍保持默认尺寸，内容照样溢出。
-
height: fit-content、min-content、max-content都不适用于textarea - CSS
resize: vertical是用户手动拉，不是自动撑开，和需求无关 - Flex 或 Grid 容器里设
align-items: start只影响对齐，不解决内容撑高问题
Vue/React 里怎么封装成可复用组件
核心逻辑不变，但要注意框架更新时机：React 函数组件里不能直接改 ref.current.style.height 后立刻读 scrollHeight，因为 DOM 还没刷新；Vue 的 v-model 更新和 DOM 渲染有微任务延迟。
最稳的做法是统一用 requestAnimationFrame 延迟到下一帧再读高度，比 setTimeout 更精准，也避免重复触发。
- React 中用
useEffect+ref，依赖数组包含value，但计算高度放在requestAnimationFrame里 - Vue 中用
nextTick不够，得嵌套一层requestAnimationFrame才可靠 - 别在
onKeyDown里算高度——用户按住不放会高频触发，卡顿明显
实际项目里最容易漏的是移动端软键盘收起后，textarea 高度没恢复到最小值，或者连续快速粘贴多次导致高度计算错位。这些边界情况不写测试很难覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
