uni-app subNVue 里有input组件focus时 点击mask隐藏subNVue IOS键盘不会收起

uni-app subNVue 里有input组件focus时 点击mask隐藏subNVue IOS键盘不会收起

项目属性 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 bigsur 11.1
HBuilderX类型 正式
HBuilderX版本号 3.1.2
手机系统 iOS
手机系统版本号 iOS 13.4
手机厂商 苹果
手机机型 7p
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • subNVue内有input，focus后打开软键盘，点击mask隐藏subNVue，但是软键盘不会关闭

预期结果：

  • 取消focus状态，隐藏软键盘

实际结果：

  • focus状态，软键盘依然存在

bug描述：

  • 由于官方没有提供mask点击事件api，导致无法手动关闭软键盘

Image Image


更多关于uni-app subNVue 里有input组件focus时 点击mask隐藏subNVue IOS键盘不会收起的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app subNVue 里有input组件focus时 点击mask隐藏subNVue IOS键盘不会收起的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已提供DEMO

@DCloud_UNI_Anne

回复 叫我白老师: 已反馈给相关组，感谢您的反馈！

已提供DEMO

Bug 已经修复 下个版本会发 同时你的示例代码里 你在 subNVue.hide(); 之前 应该也掉一下 input的 blur()
submit(){
const subNVue = uni.getCurrentSubNVue();
this.$refs.input.blur();
subNVue.hide();
}

好的，感谢您

这是一个iOS平台上subNVue与软键盘交互的已知问题。当subNVue包含input组件时，点击mask隐藏subNVue后，iOS键盘不会自动收起。

解决方法：

  1. 在隐藏subNVue前，手动调用blur方法：
// 获取input元素
const input = this.$refs.inputRef
// 失去焦点
input.blur()
// 隐藏subNVue
this.subNVue.hide()
  1. 或者使用uni.hideKeyboard()强制关闭键盘：
uni.hideKeyboard()
this.subNVue.hide()
  1. 也可以监听subNVue的hide事件：
this.subNVue.addEventListener('hide', () => {
    uni.hideKeyboard()
})
回到顶部