html输入框中文问题,移动端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，自己写一个键盘组件，不过记得考虑兼容性。

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