uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。

如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。

输入法出来后,设置了自动将页面顶上来的配置:pages.json

"softinputMode": "adjustResize"

javascript 复制代码
"globalStyle" : {
        "navigationBarTextStyle" : "black",
        "navigationBarTitleText" : "uni-app",
        "navigationBarBackgroundColor" : "#F8F8F8",
        "backgroundColor" : "#F8F8F8",
        "app-plus" : {
            "titleNView" : false,
			"softinputMode": "adjustResize"
        }
		// "disableScroll": true // 禁用旧版页面缓存
    },

如果快速返回页面,或者跳转其他页面,输入法没来得及收回,那么顶上去的页面就会无法弄下来,所以我们需要手动处理一下。

先来个公共方法:main.js,主要是收起软键盘。

javascript 复制代码
Vue.prototype.$hideKeyboard = function(url){
	// console.log('收起软键盘')
	setTimeout(()=>{
		uni.hideKeyboard(); // 收起软键盘
	},50)
};

需要在每个页面的onshow生命周期内调用。

javascript 复制代码
onShow(){
			this.$hideKeyboard()
		},

其他处理方式

可以在滑动页面时自动取消输入法聚焦,这样就不用设置页面顶上去的功能。

相关推荐
Dxy12393102167 分钟前
JS如何把数据添加到列表中
前端·javascript·vue.js
共享家95277 分钟前
Java入门( 异常 )
java·开发语言·php
芒果大胖砸10 分钟前
uniapp 在h5中预览pdf hybrid方法
pdf·uni-app
清音啊11 分钟前
Uniapp 实现左滑显示操作按钮的列表(适配多端 + 实战案例)
uni-app
蜡台11 分钟前
Uniapp 实现 二手车价格评估 功能
前端·javascript·uni-app·估值·汽车抵押·二手车评估
standovon12 分钟前
SQL SERVER 登陆错误:18456
java
大傻^13 分钟前
Spring AI Alibaba 文档智能处理:PDF、Markdown知识入库全链路
java·人工智能·spring·pdf·知识图谱·springai·springaialibaba
旭久13 分钟前
web前端开发好物推荐-(code-inspector-plugin/react-dev-inspector)页面快捷定位代码位置
前端·react.js·前端框架
floret. 小花16 分钟前
Vue3 知识点总结 · 2026-03-20
前端·面试·electron·学习笔记·vue3
木斯佳19 分钟前
前端八股文面经大全:Bilibili 前端实习面(2026-03-20)·深度解析
前端·sse·ssr·rag