textarea自动撑高需设height: auto、box-sizing: border-box，配合min-height；禁用height: 100%或固定值；父容器为flex时加align-self: flex-start；input无法自适应高度，须用textarea或contenteditable替代。
textarea怎么让高度随内容自动撑开
直接用 min-height 不够，必须配合 height: auto 和正确的盒模型控制。否则在 Safari 或旧版 Chrome 里会卡死高度、无法收缩，或者输入换行后突然跳高一截。
-
height: auto是关键，不能写成height: 100%或固定值，否则 JS 计算或 CSS 自适应都会失效 - 必须设
box-sizing: border-box，否则 padding 和 border 会让实际内容区变窄，导致滚动条提前出现 - 推荐加
resize: vertical，既保留手动调节能力，又避免用户拖成超宽破坏布局 - 如果父容器有
display: flex，记得给textarea加align-self: flex-start，不然可能被拉伸填满整行
input[type="text"] 能不能也自适应高度
不能。原生 input 是单行元素，不支持换行和高度自适应。强行用 min-height 只能设个最小高度，内容多了就溢出或遮挡。
- 真要多行+自适应，只能换用
textarea，哪怕只允许输入一行，也得靠 JS 拦截Enter（event.preventDefault()） - 若坚持用
input，可考虑contenteditable+div模拟，但会丢失表单原生校验、无障碍支持弱、移动端光标定位易出错 - 某些 UI 库（如 Ant Design）的
Input.TextArea封装了自动 resize 逻辑，本质还是监听input事件 + 动态改scrollHeight
为什么 setAttribute('style', 'min-height: 80px') 没用
因为内联 style 优先级太高，后面 CSS 规则（比如重置用的 height: 100%）会被覆盖，反而破坏自适应逻辑。
- 应该用
element.style.minHeight = '80px'，这样 JS 修改的是 style 对象，后续还能被 CSS 变量或媒体查询覆盖 - 更稳妥的做法是预设 class，比如
class="auto-resize"，然后在 CSS 里写.auto-resize { min-height: 80px; height: auto; } - 注意：用 JS 动态计算高度时，别在
input事件里直接读scrollHeight—— 如果字体还没加载完，值会偏小；建议加requestAnimationFrame延迟一帧再读
移动端 textarea 自适应常见断点
iOS Safari 对 textarea 的 scrollHeight 计算不一致，尤其在键盘弹起/收起时，容易卡在“只显示半行”的状态。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
focus和blur，在focus后强制触发一次textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; - 避免用
vh单位设max-height，iOS 键盘会改变视口高度，导致max-height突然变小，内容被截断 - Android Chrome 有时对
padding内边距渲染延迟，建议用padding-block替代padding-top/padding-bottom，兼容性更好
