移动端input框type为number仍可以输入中文的问题

本文主要针对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,自己写一个键盘组件,不过记得考虑兼容性。

感谢阅读,如果你有更好的解决方案,希望你能在评论给出,一起讨论,感激不尽。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容