输入银行卡号每四位自动添加空格

发表于 | 分类于

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

1
<input type="tel" id="bankNum" placeholder="请输入本人所属银行卡号" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#bankNum").on("keyup", function(e) {
    // 获取当前光标的位置
    var caret = this.selectionStart;
    // 获取当前的value
    var value = this.value;
    // 从左边沿到坐标之间的空格数
    var sp = (value.slice(0, caret).match(/\s/g) || []).length;
    // 去掉所有空格
    var nospace = value.replace(/\s/g, '');
    // 重新插入空格
    var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim();
    // 从左边沿到原坐标之间的空格数
    var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length;
    // 修正光标位置
    this.selectionEnd = this.selectionStart = caret + curSp - sp;
});