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

相关推荐
河北清兮网络科技36 分钟前
短剧 APP 产品说明
小程序·uni-app·短剧
宠友信息6 小时前
一套基于uniapp+springboot完整社区系统是如何实现的?友猫社区源码级功能解析
java·spring boot·后端·微服务·微信·uni-app
碎像14 小时前
掌握uniapp发布微信小程序、App(Android)
微信小程序·小程序·uni-app
stpzhf14 小时前
uniapp nvue组件多个text在一行并且高亮其中一些文字
前端·javascript·uni-app
qq_3168377514 小时前
制作uniapp原生插件 在本地离线打包中测试 集成在云打包中
uni-app
Fate_I_C2 天前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
chQHk57BN2 天前
跨平台前端开发:用Flutter和UniApp一次编写多端运行
flutter·uni-app
自然 醒2 天前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
CHB2 天前
uni-agent,你的数字员工来了
人工智能·uni-app·vibecoding
h_jQuery2 天前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app