softinputmode在h5端完全无效,因其仅适用于app-plus平台;ios safari软键盘会遮挡内容且不触发resize,需通过window.innerheight变化监听并防抖过滤,配合scrollintoview和css滚动优化解决。

uni-app H5端iOS Input被遮挡,为什么softinputMode完全无效
因为softinputMode是 App 平台(app-plus)专属配置,H5 端压根不解析这行字段——写在 pages.json 里也白搭。iOS Safari 的软键盘行为和原生 WebView 完全不同:它不会压缩视口,也不会触发 resize 事件,而是直接“盖”在页面上,导致底部 <input> 内容不可见、无法左右滚动。
H5 iOS下<input> disabled时无法左右滚动的根源
这不是 uni-app 的 bug,而是 iOS Safari 的渲染限制:disabled 状态的 <input> 会被系统禁用所有滚动交互,即使内容溢出也锁死。常见于表单预览页、只读模式等场景。
- 临时方案:改用
<textarea readonly></textarea>替代<input disabled>,readonly不阻断滚动 - 更稳妥做法:用
<view contenteditable="true"></view>模拟只读输入框,配合user-select: none和pointer-events: none控制交互 - 千万别用
v-model绑定contenteditable元素,会丢光标;改用@input+el.innerText手动同步
H5端监听键盘弹起只能靠window.innerHeight变化
H5 没有 uni.onKeyboardHeightChange,唯一可靠信号是窗口高度突变——但 iOS Safari 弹键盘时 window.innerHeight 缩小值不稳定(尤其缩放字体开启时),必须加防抖和阈值过滤。
- 监听
window.addEventListener('resize', handler),但首次触发可能是页面加载,需忽略前 300ms 内的 resize - 只接受
window.innerHeight变化 > 100px 的事件,排除横竖屏切换等干扰 - 获取焦点后立即调
input.scrollIntoView({ behavior: 'smooth', block: 'nearest' }),比pageScrollTo更准且兼容 H5 - 别依赖
getBoundingClientRect()计算位置——键盘弹出瞬间 DOM 坐标可能未更新,先setTimeout(() => {}, 100)再查
为什么H5 iOS上cursor-spacing和adjust-position不起作用
这两个属性仅对 App 端原生 <input> 生效,H5 渲染走的是浏览器原生 input 行为,uni-app 不介入底层 focus/scroll 逻辑。强行写上去既不报错也不生效,纯属配置污染。
真正要解决滚动卡住,得从 CSS 层面干预:给输入框父容器加 overflow-x: auto 和 -webkit-overflow-scrolling: touch,同时确保 white-space: nowrap 防止换行截断内容。iOS 上若仍卡顿,大概率是父级 position: fixed 或 transform 导致合成层隔离,滚动上下文丢失——这时只能把输入框提到 body 顶层,用 z-index 和绝对定位兜底。











