基于jquery实现的银行卡号每隔4位自动插入空格的实现代码

难点不是插入空格，而是修正光标的位置，这个只支持IE9＋、chrome浏览器

注意：这个使用了jquery框架

核心代码

  $('#kahao').on('keyup',function(e) {
   //只对输入数字时进行处理
    if((e.which >= 48 && e.which <= 57) ||
        (e.which >= 96 && e.which <= 105 )){
      //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前光标的位置
      var caret = this.selectionStart
      //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前的value
      var value = this.value
      //从左边沿到坐标之<a href="https://www.jb51.cc/tag/jiande/" target="_blank" class="keywords">间的</a>空格数
      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()
      //从左边沿到原坐标之<a href="https://www.jb51.cc/tag/jiande/" target="_blank" class="keywords">间的</a>空格数
      var curSp = (curVal.slice(0,caret).match(/\s/g) || []).length
     //修正光标位置
     this.selectionEnd = this.selectionStart = caret + curSp - sp

    }
  })
})</pre>

完整代码：已经测试

rush:js;">

银行卡号4位空格

经过测试确实很好用，里面用到了很多的正则

\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。

关于正则表达式的教程可以参考这篇文章：

4位插入空格银行卡号

基于jquery实现的银行卡号每隔4位自动插入空格的实现代码

核心代码

相关文章