本文主要针对IOS做了测试,对安卓测试较少,但问题应该是通用的。
首先这个问题非常棘手,因为这可能是浏览器的一个bug,当用户在type=number的input框输入中文时,这个值其实并不会被接收,但是有时会被展现。即:它会像普通值一样显示,但是双向绑定的参数接收不到中文值,一般为空字符串。
type=number会吊起数字键盘,很多产品设计倾向于此,但是目前来看各系统(浏览器)对此兼容并不好。
这类输入一般来源于非标准输入或空input框聚焦时,哪怕是type=number,ios键盘也会在上面推荐常用中文...
原理
点击输入法上面的推荐中文,onchange函数并不会被触发,可能这是一个粘贴操作,或者前后值没有差异(中文被拦截后还是空字符串)
同时onkeydown等也不会被触发。这个行为就像一个幽灵行为,无法定位。
解决
经过各种事件的尝试,最终发现oninput会监听到此行为(我早该想到的)。
但是抓输入值的方式略有不同,以vue为例,应为$event.data,oinput接收到的参数为inputEvent,即输入事件,而不是dom。
并且这个接收到的值为本次输入/粘贴等过来的值,而不是input框中所有的值。
笔者发现,oninput不能像onkeydown等事件一样阻止冒泡和默认行为。
最终笔者解决的方案为
1.在keydown时存储旧值,所有input共用一个变量就好
2.oninput时对本次加入的值进行校验,可以采用正则等方式。
3.如果通过校验,不用进行操作。不通过时,对input双向绑定的值进行旧值赋值,这可能会触发input的更新,就不会出现中文,也没有闪现的情况,表现就是中文没有输入进去。
解决2
不采用input=number,自己写一个键盘组件,不过记得考虑兼容性。
感谢阅读,如果你有更好的解决方案,希望你能在评论给出,一起讨论,感激不尽。