input输入银行卡每4位添加空格后光标位置问题

最新推荐文章于 2024-08-16 11:55:27 发布

孚遥

最新推荐文章于 2024-08-16 11:55:27 发布

阅读量2k

点赞数

分类专栏：沉淀

本文链接：https://blog.csdn.net/ming_221/article/details/91444198

版权

针对在iOS和Android设备中输入银行卡号时遇到的光标位置问题，本文详细描述了问题的现象，分析了iOS和Android系统的不同处理方式，并提出了解决方案。解决方案包括记录光标位置、判断是否添加空格以及处理中文输入和剪切复制操作时的光标移动。通过调整光标位置，成功解决了在不同系统和浏览器中输入时的问题。

摘要由CSDN通过智能技术生成

问题描述

问题1：从数字中间输入会导致输完一个数字之后光标立马跑到input最右端
问题2：添加的空格被视为非光标输入，光标的位置会自动前移一位
例：输入“12345”，input里的内容变为“1234 5”，光标的位置会在5的前面，而不是5的后面

iOS：从头到尾输入时表现正常，问题1会出现，问题2不会出现
Android：有一个Android 7版本的小米手机，在手机自带浏览器中问题2不会出现，但是会出现问题1；其余Android在手机自带浏览器中会出现问题2，没有问题1，在App中只有问题1，没有问题2

猜测

iOS系统和Android系统处理input输入的方式可能不一样，iOS只以内容为主，至于实际是不是键盘输入的并不关心。所以当我们取出输入的内容，并且在中间加了空格，再放回去，input收到的是整个值，不管光标在输入的时候在什么位置，处理完毕之后光标都会被放到最右端。
而Android系统处理input主要以实际输入操作为准，在触发事件中增加了input内容的长度，没有被光标捕获，因此加了空格后光标没有移位，中间插入光标也不会跑到最右端。