input 银行卡输入框，四位一空格

input 银行卡输入框，四位一空格

项目中遇到输入银行卡的input框，并且要求是4位一空，四位一空的问题比较容易

<input type="tel" id="bankCard" placeholder="" >

<script>
    $("#bankCard").on("input",function(){
        var val=$(this).val().replace(/\s/g,"").replace(/(\d{4})/g,"$1 ");
        $(this).val(val);
    });
</script>  
jquery请自己引入；

但是空了之后，从中间添加，中间删除光标就会乱跳，以下方法可以完美解决这个问题：

<input type="tel" id="bankCard" placeholder="" >

<script>
    $("#bankCard").on("keyup",function(){
        //获取当前光标的位置
        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+/g,"").replace(/(\d{4})/g, "$1 ").trim();
        //从左边沿到原坐标之间的空格数
        var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length;
        //修正光标位置
        this.selectionEnd = this.selectionStart = caret + curSp - sp;
    });
</script>

原文：http://blog.csdn.net/ajia_666/article/details/74202950