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

问题描述

问题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内容的长度，没有被光标捕获，因此加了空格后光标没有移位，中间插入光标也不会跑到最右端。

解决

1. 猜测会不会跟replace函数或者正则表达式有关系，尝试用字符串方法替代replace和正则，但是发现，只要是将格式化后的字符串整个传给input，光标就会跑到最右端
   val.replace(/(\d{4})/g, '$1 ')

2. 值替换一定会修改光标位置，那就尝试直接操作光标吧。inout.selectionStart和input.selectionEnd原本是用于获取光标所覆盖选区的起始位置和结束位置，若二者相等，则为光标的位置。
   对于问题1，我们只需要记录光标在输入时的实时位置，并且在格式化input值之后重新设置光标位置。
   对于问题2，我们需要判断当前输入字符串是否会进行添加空格的操作，如果有，则要将光标后移移位，