uniapp input苹果中文键盘输入拼音直接切换输入焦点监听失效

问题:

uniapp微信小程序,苹果手机中文键盘状态下,输入字母时,不点击确定也不点击空白处,直接切换到下一个input输入框,UI界面会保留上个输入框输入的内容,但input、blur事件监听到的值都是空(ios多个机型复现)。

此时输入框并没有触发@input事件,但是输入框会触发@blur事件,虽然输入框内的值被保留下来了,但e.target.value是没值的。

解决办法:

blur回调时修改输入框v-model的值,使组件重新渲染,清空UI界面上未确认的值。

html 复制代码
<input type="text" v-model="inputVal" @blur="onBlur" />
js 复制代码
methods:{
	onBlur(e) {
    	let val = e.detail.value || ''
    	if (!val) {
        	this.inputVal = ' ';//此处注意是 空格+字符串
        	nextTick(() => {
            	this.inputVal = ''
        	})
    	}
	}
}

nextTick是必须的,需要等待第一次赋值渲染完成

相关推荐
叱咤少帅(少帅)1 天前
Uniapp开发pc端,小程序和APK
小程序·uni-app
2501_915918412 天前
iOS性能测试工具 Instruments、Keymob的使用方法 不局限 FPS
android·ios·小程序·https·uni-app·iphone·webview
2501_915918412 天前
iOS 混淆流程 提升 IPA 分析难度 实现 IPA 深度加固
android·ios·小程序·https·uni-app·iphone·webview
前端 贾公子2 天前
解决uni-app 输入框,键盘弹起时页面整体上移问题
前端·vue.js·uni-app
Muchen灬2 天前
【uniapp】(5) 创建gitee仓库并推送源码
gitee·uni-app
Muchen灬2 天前
【uniapp】(6) uniapp中使用vuex
uni-app
2501_915909062 天前
React Native 上架 App Store:项目运行与审核构建的流程
android·ios·小程序·https·uni-app·iphone·webview
李庆政3702 天前
uniapp+unicloud打包部署微信小程序
微信小程序·小程序·uni-app
2501_915909062 天前
苹果 Safari 浏览器抓包 页面刷新后的请求分析
android·前端·ios·小程序·uni-app·iphone·safari