解决uni-app 输入框，键盘弹起时页面整体上移问题

前端贾公子2026-04-04 9:36

我们每次在做UNIAPP小程序和H5遇到输入框时，总会在测试的时候点击输入框弹出软键盘把页面往上移动，仔细翻读uniapp文档的时候发现了一个属性adjust-position ：Boolean类型，作用是键盘弹起时，是否自动上推页面

1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize

2.这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan，

在pages.json里该页面注册的style里加上这段代码就能完美解决了

复制代码

"style": {
    "navigationBarTitleText": "对话详情",
    "enablePullDownRefresh": true,
    //手机软键盘升起不让其将页面头部上推
    "app-plus": {
        "softinputMode": "adjustResize"
    }
}

softinputMode的值为adjustResize时，屏幕高度=整个页面高度+软键盘高度，，，为adjustPan时，整个页面高度不变，但键盘弹出后页面会上移

其它思路

移动端h5页面经常会遇到软键盘顶起底部fixed定位元素，体验不好。记录下uni-app下同样的问题是如何解决的。

解决思路：获取窗口尺寸，监听窗口尺寸变化，比较变化后窗口的尺寸和实际窗口尺寸的大小做相应处理。直接上代码:

复制代码

<!--html-->
<input type="text" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" placeholder=""/>
<view v-if="tabbar">底部悬浮</view>
data(){
return{
tabbar: true,
windowHeight: ''
}
},
onLoad() {
uni.getSystemInfo({
success: (res)=> {
this.windowHeight = res.windowHeight;
}
});
uni.onWindowResize((res) => {
if(res.size.windowHeight < this.windowHeight){
this.tabbar = false
}else{
this.tabbar = true
}
})
},
methosd:{
showTabbar(){
this.tabbar = true;
},
hideTabbar(){
this.tabbar = false;
}
}

@click和@blur 分别解决安卓和ios 兼容问题

=====================================================================================

ps：可以利用弹性布局，中间flex为1，底部按钮固定高度。