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()
		},

其他处理方式

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

相关推荐
CoderYanger16 分钟前
Java EE 进阶:5. Spring IoC&DI(第三弹):Spring DI
java·开发语言·spring boot·spring·面试·java-ee·mvc
用户3600555790018 分钟前
Kestrel_VLLM - 26 · 发射空档三步曲:事件计时 → nsys → 判别实验
前端
echome88822 分钟前
JavaScript async/await 错误处理:别让 Promise 静默失败
开发语言·前端·javascript·promise
一条泥憨鱼32 分钟前
【Kafka】零基础学习教程
java·分布式·学习·kafka
PedroQue9939 分钟前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app
鶴哥只手遮天39 分钟前
Angular 22 源码级深度解析-第 02 章 编译链路总览:从模板字符串到 `ɵɵ` 指令
前端·开源·angular.js
尘世中一位迷途小书童39 分钟前
别再堆万字 Prompt:用 Agent Skills 给团队写一个「前端 Review」Skill
前端·ai编程·cursor
aixingpan41 分钟前
aixingpan.cn API开发文档:api_docs_bichart_common2接口指南
前端·php
Wang's Blog42 分钟前
Java 项目实战:交友项目 - 即时通信总结:全链路复盘、可复用清单与自检
java·python·交友
文丑颜不良啊42 分钟前
LeetCode1501~1520题目解析
java·leetcode