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是必须的,需要等待第一次赋值渲染完成

相关推荐
华玥作者11 小时前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang11 小时前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_9160088913 小时前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW1 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468591 天前
uniapp vue3 小程序开发注意事项
uni-app
雪芽蓝域zzs1 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
普通人62 天前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
PedroQue993 天前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
PedroQue993 天前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app
CHB5 天前
别再问uni-app x蒸汽模式是否成熟了,已经有大量App案例上架应用商店了
uni-app