CSS移动端实现自适应输入框高度_利用textarea的auto-resize逻辑-css教程-PHP中文网

移动端 textarea auto-resize 失效主因是 ios safari/android webview 对 scrollheight 计算延迟或截断，尤其软键盘显隐时；需「测高+重置+防抖」闭环处理，并监听 visualviewport resize 或 focus/blur 事件容错。

css移动端实现自适应输入框高度_利用textarea的auto-resize逻辑

textarea auto-resize 在移动端为啥不灵？

因为 iOS Safari 和部分 Android WebView 对 scrollHeight 的计算有延迟或截断，尤其在软键盘弹出/收起时，offsetHeight 和 scrollHeight 可能短暂失准，导致高度卡死或反复抖动。

软键盘遮挡输入框后，scrollHeight 有时返回的是“未展开”状态的值
CSS min-height / max-height 设得太死，会压制 JS 动态调整
监听 input 事件不够，还得补上 focus、blur 和键盘显隐事件（如 resize）

怎么写一个靠谱的 auto-resize 函数？

核心是「测高 + 重置 + 防抖」三步闭环，不能只靠 scrollHeight 一招鲜。

先临时移除 height 和 max-height，让元素自然撑开
用 scrollHeight 获取真实内容高度，但要加 getComputedStyle 补一行内边距和行高误差
设回 height 后，再用 setTimeout(..., 0) 触发一次重排，避免 iOS 渲染延迟
必须节流：连续输入下，input 事件可能 1 秒触发几十次，直接算会卡顿

function resizeTextarea(el) {
  el.style.height = 'auto';
  const computed = getComputedStyle(el);
  const height = el.scrollHeight +
    parseInt(computed.borderTopWidth) +
    parseInt(computed.borderBottomWidth);
  el.style.height = height + 'px';
}
// 调用前记得节流：el.addEventListener('input', throttle(resizeTextarea, 100));

移动端键盘弹出时高度错乱怎么办？

这不是 JS 错了，是视口被压缩后，scrollHeight 拿到的是“被挤压前”的尺寸，得等键盘稳定再重算。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

监听 window.visualViewport?.addEventListener('resize', ...)（iOS 16.4+ 支持）
降级方案：在 focus 后 setTimeout(..., 300) 再调一次 resizeTextarea
Android 上可监听 keyboardDidShow（需 Cordova / Capacitor 插件），纯 Web 建议放弃精准捕获，改用防抖 + 用户可见区域判断
别依赖 window.innerHeight 变化——很多安卓浏览器根本不触发 resize