基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
难点不是插入空格，而是修正光标的位置，这个只支持IE9＋、chrome浏览器
注意：这个使用了jquery框架
核心代码
$(function(){
$('#kahao').on('keyup',function(e){
//只对输入数字时进行处理
if((e.which>=48&&e.which<=57)||
(e.which>=96&&e.which<=105)){
//获取当前光标的位置
varcaret=this.selectionStart
//获取当前的value
varvalue=this.value
//从左边沿到坐标之间的空格数
varsp=(value.slice(0,caret).match(/\s/g)||[]).length
//去掉所有空格
varnospace=value.replace(/\s/g,'')
//重新插入空格
varcurVal=this.value=nospace.replace(/(\d{4})/g,"$1").trim()
//从左边沿到原坐标之间的空格数
varcurSp=(curVal.slice(0,caret).match(/\s/g)||[]).length
//修正光标位置
this.selectionEnd=this.selectionStart=caret+curSp-sp
}
})
})
完整代码：已经测试
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>银行卡号4位空格</title>
<scriptsrc="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>
</head>
<body>
<inputtype="text"id="kahao"/>
<script>
$(function(){
$('#kahao').on('keyup',function(e){
//只对输入数字时进行处理
if((e.which>=48&&e.which<=57)||
(e.which>=96&&e.which<=105)){
//获取当前光标的位置
varcaret=this.selectionStart
//获取当前的value
varvalue=this.value
//从左边沿到坐标之间的空格数
varsp=(value.slice(0,caret).match(/\s/g)||[]).length
//去掉所有空格
varnospace=value.replace(/\s/g,'')
//重新插入空格
varcurVal=this.value=nospace.replace(/(\d{4})/g,"$1").trim()
//从左边沿到原坐标之间的空格数
varcurSp=(curVal.slice(0,caret).match(/\s/g)||[]).length
//修正光标位置
this.selectionEnd=this.selectionStart=caret+curSp-sp
}
})
})
</script>
</body>
</html>
经过测试确实很好用，里面用到了很多的正则
\s匹配任何空白字符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。
关于正则表达式的教程可以参考这篇文章：
https://www.nhooo.com/tools/zhengze.html
https://www.nhooo.com/tools/regexsc.htm
热门推荐
10 朋友新年祝福语大全 简短
11 新年祝福语简短大方兔年
12 搬新家礼物祝福语简短
13 同学见面花束祝福语简短
14 五一假期祝福语幽默简短
15 离职欢送敬酒祝福语简短
16 对学弟的祝福语简短
17 考老师辞职祝福语简短
18 祝福语驱散霉运的话简短