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

相关推荐
Mark1085939 分钟前
【踩坑】Uni-app微信小程序自定义组件在 Flex 布局中未铺满整行
微信小程序·小程序·uni-app
梦曦i4 小时前
create-uni-app v1.1.0:结构化生成,工程骨架更规范
前端·uni-app
2501_916007471 天前
Flutter与游戏App加固避坑指南:如何为混合开发与高交互应用选对安全方案?
安全·flutter·游戏·ios·小程序·uni-app·iphone
PedroQue991 天前
@meng-xi/create-uni-app v1.0.0 正式发布
前端·uni-app
肥仔哥哥19301 天前
uniapp开发App一键登录:从技术选型到前后端落地实战--2秒登录,流失率减半:在uniapp里接入一键登录的全过程
uni-app·一键登录设计选型
JackieDYH1 天前
uniapp-幸运抽奖转盘组件-案例
uni-app
ModyQyW2 天前
vite-plugin-uni-manifest 更新了什么
前端·typescript·uni-app
PedroQue992 天前
v2.7.1:修复 H5 端返回死循环闪烁问题
前端·uni-app
lhldsg2 天前
AI零售系统实战指南:从架构设计到落地部署全解析
java·人工智能·小程序·uni-app·零售
RisunJan3 天前
uni-app 面试知识点梳理
面试·职场和发展·uni-app