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

相关推荐
行走的陀螺仪2 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
森之鸟4 小时前
uniapp——配置鸿蒙环境,进行真机调试
华为·uni-app·harmonyos
2501_915918417 小时前
常见 iOS 抓包工具的使用,从代理抓包、设备抓包到数据流抓包
android·ios·小程序·https·uni-app·iphone·webview
handsome09168 小时前
uniapp打包的app,报This app was built with the iOS 18.1 SDK解决方案
ios·uni-app
yqcoder9 小时前
uni-app 之 下拉刷新
运维·服务器·uni-app
liu_bees12 小时前
微信小程序Canvas生成图片失败:canvas is empty问题解析
微信小程序·小程序·uni-app·vue
木子啊12 小时前
Uni-app性能优化:分包与长列表实战
性能优化·uni-app
yqcoder13 小时前
uni-app 之 设置 tabBar
运维·服务器·uni-app
家里有只小肥猫14 小时前
uniApp下拉渐变头部 拿来即用
前端·javascript·uni-app
fanruitian1 天前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app