adjust-position 必须配合 pages.json 中的 "softinputmode": "adjustresize" 才生效,否则 app 端无反应;h5 和小程序不支持该属性,需用 window.innerheight 变化模拟。

adjust-position 属性为什么必须配 softinputMode 才生效
单独在 <input> 上写 adjust-position="true",在 App 端大概率没反应——它只是“告诉 uni-app 我想被调整”,但原生层根本不会下发键盘高度变化事件。真正起作用的是 pages.json 里那行配置:"app-plus": { "softinputMode": "adjustResize" }。这个配置才是打开原生键盘联动的总开关。
常见错误现象:改了 input 的属性,iOS 上看着有点反应,Android 上完全不动;或者只在部分机型(如华为 EMUI)有效,小米/OPPO 就失效。
-
adjustResize是 iOS 和多数 Android 新机型的推荐值,页面内容会整体上推,输入框自然露出 - 少数老 Android 机型(如部分 Android 5.x 定制 ROM)可能需要降级为
adjustPan,但会牺牲平滑滚动,慎用 - H5 和小程序端
adjust-position完全不触发,别白费劲;得靠window.innerHeight变化 + 防抖检测来模拟 -
web-view内部的 input 不受该配置影响,它是独立渲染环境,需单独处理高度同步
@input 事件比 v-model 更稳的关键在哪
v-model 在 uni-app 表单中看似省事,但它等价于同时绑定 :value 和监听 @input 并立即赋值,这会导致每次按键都触发一次响应式更新和视图重计算。在键盘弹起动画期间,这种高频更新极易与 WebView 的布局重排冲突,引发页面跳动、闪退甚至焦点丢失。
实操建议直接放弃 v-model,改用原生事件手动接管:
<input type="text" :adjust-position="true" cursor-spacing="100">
-
handleInput(e)中取e.detail.value(不是e.target.value),这是 uni-app 的标准事件格式 - 快速连输时加
_.debounce(..., 200),避免校验/滚动逻辑被频繁触发 - 不要在
@input里调uni.pageScrollTo或修改scroll-top,动画不同步易翻车 - 密码类输入建议用
type="password"而非type="text"+ 自定义图标,后者在部分输入法下会暴露明文
cursor-spacing 和 always-embed 这两个参数怎么设才不白配
cursor-spacing 不是“离顶部距离”,而是“光标到输入框可视区域底部的最小间距”。设太小(比如 20),键盘一弹,输入框还是会被盖住;设太大(比如 300),页面会被无谓地顶高,底部按钮消失。
经验数值:取当前预估键盘高度的 1/3~1/2。App 端实测常见键盘高度约 250–300px,所以 cursor-spacing="100" 是较稳妥的起点。
-
always-embed="true"主要解决 Android 上“键盘弹一半突然消失”的怪异行为,尤其在多输入框切换时,强制保持键盘与当前 input 绑定 - 这两个属性只对
<input>和<textarea></textarea>生效,对<u-input></u-input>或<uni-easyinput></uni-easyinput>无效——封装组件内部未透传这些原生能力 - iOS 全面屏设备要注意安全区,
cursor-spacing建议配合safe-area-inset-bottomclass 动态补偿
为什么 u-input 和 uni-easyinput 在键盘场景下容易出问题
它们本质是 View + Input 的嵌套结构,外层 View 拦截了 focus/blur 事件,内层原生 input 的键盘联动信号被弱化或延迟。尤其在 Android 上,u-input 的 v-model + 内部 watch 机制会和键盘弹起节奏打架,导致输入延迟、光标错位、甚至整个页面重绘崩溃。
- 真机测试发现:同一页面,原生
<input>键盘响应延迟 ≈ 0ms,<u-input></u-input>平均延迟 80–200ms,部分低端机超 400ms -
uni-easyinput虽然轻量,但默认开启confirm-type="next",在密码框后仍显示“下一个”按钮,引发误触和焦点混乱 - 所有第三方封装组件,在
pages.json未配softinputMode时,adjust-position属性形同虚设 - 登录页这种核心流程页,建议全线回归原生
<input>,样式用 CSS 重写,可控性远高于依赖组件库
pages.json 配置和组件选型的强耦合关系——不是代码写得不够多,而是没意识到原生能力必须由原生配置解锁。











