首页 > 编程 > JavaScript > 正文

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

2019-11-19 18:52:44
字体:
来源:转载
供稿:网友

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

注意:这个使用了jquery框架

核心代码

$(function() {      $('#kahao').on('keyup', function(e) {       //只对输入数字时进行处理        if((e.which >= 48 && e.which <= 57) ||            (e.which >= 96 && e.which <= 105 )){          //获取当前光标的位置          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                }      })    })

完整代码:已经测试

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>银行卡号4位空格</title>  <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script></head><body>  <input type="text" id="kahao" />  <script>    $(function() {      $('#kahao').on('keyup', function(e) {       //只对输入数字时进行处理        if((e.which >= 48 && e.which <= 57) ||            (e.which >= 96 && e.which <= 105 )){          //获取当前光标的位置          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                }      })    })  </script></body></html>

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

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

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

//www.VeVB.COm/tools/zhengze.html

//www.VeVB.COm/tools/regexsc.htm

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表