当前位置: 首页 > Web前端 > HTML5

移动端输入框类型为数字时,仍然可以输入并粘贴[中文]的问题

时间:2023-04-05 19:56:56 HTML5

首先,这个问题难度很大,因为可能是浏览器的bug。当用户在type=number的输入框中输入中文时,实际上并没有收到这个值,只是有时会显示出来。即:会像普通值一样显示,但是双向绑定的参数不能接收中文值,一般为空字符串。_type=number会把数字键盘抬起,很多产品设计都倾向于这样,但是目前各种系统(浏览器)的兼容性不好。这种类型的输入一般来自于非标准输入或者是空输入框获得焦点时,即使是type=number,ios键盘也会在上面推荐常用的中文...原理点击输入法上方的推荐中文,onchange函数不会被触发,可能这是粘贴操作,或者前后值没有区别(中文被截取后还是空串)和onkeydown等不会被触发。这种行为就像幽灵行为一样,无法定位。在尝试了各种事件后,终于发现oninput会监听这个行为(早该想到的)。但是,捕获输入值的方式略有不同。以vue为例,应该是$event.data,oinput接收的参数是inputEvent,是输入事件,不是dom。而接收到的值就是这次输入/粘贴的值,而不是输入框中的所有值。作者发现oninput不能防止像onkeydown等事件的冒泡和默认行为。最后,作者的解决方案是1.keydown时保存旧值,所有输入共享一个变量。2、在oninput的时候验证这次加入的值,可以使用正则化等方法。3、如果验证通过,则无需操作。如果不通过,将旧值赋给输入的双向绑定值,可能会触发输入的更新,不会有中文,也不会闪烁,说明中文是不输入。解决方案2不要使用input=number,自己写一个键盘组件,但是记得考虑兼容性。感谢阅读,如果你有更好的解决方案,希望大家在评论中提出,一起讨论,非常感谢。