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

相关推荐
孙 悟 空4 小时前
uni-app:监听页面返回,禁用返回操作
前端·javascript·uni-app
mosen86811 小时前
uniapp中uni.scss如何引入页面内或生效
前端·uni-app·scss
lyz24685912 小时前
uniapp popup弹窗组件的自定义使用方法
uni-app
沙尘暴炒饭12 小时前
uniapp 前端解决精度丢失的问题 (后端返回分布式id)
前端·uni-app
牛牛科技12 小时前
生产管理系统PHP+Uniapp源码
uni-app
Smile_ping12 小时前
uniapp——APP读取bin文件,解析文件的数据内容(一)
uni-app·uniapp 读取文件·app端读取bin文件
CDERP-plus12 小时前
uniapp 3分钟集成轮播广告图
uni-app·erp·erp移动端
街尾杂货店&12 小时前
webpakc介绍
uni-app
洗发水很好用1 天前
uniApp打包H5发布到服务器(docker)
uni-app