js控制四个数字加空格（银行卡）并且支持插入数字（解决光标跳动问题）

一般来说，为了便于用户输入，银行卡号会每四个数字用空格隔开，这个在前端使用正则表达式不难做到，但是容易出现不能从数字中间插入的问题：光标移动到中间，输入一个数字后光标便自动跳转到最右了。

上述问题非常影响用户体验，经过一段时间的研究，我用以下办法解决了此问题：

Input

这里使用了type=”tel”,这样是为了在移动端调出数字键盘，H5的新特性pattern也可以实现，但是这个属性的兼容性并不是很好。

<input type="tel" placeholder="请输入储蓄卡卡号" name="cardNum">

监控输入

js针对input有个属性selectionStart，这个是当前光标所在的位置，那么我们只要获取了这个位置，哪怕之后它跳到了最右，我们也可以控制它回到原来的位置。