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

网络编程基于jquery实现的银行卡号每隔4位自动插入空格的实现代码 06-22

难点不是插入空格，而是修正光标的位置，这个只支持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 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ fnrtv]。

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

http://www.gimoo.net/tools/zhengze.html

http://www.gimoo.net/tools/regexsc.htm

解析jQueryEasyUI的使用
使用EasyUI最好的方法不是学会，所有的东西都敲一遍，你也没办法敲得完，而是找到一个好的文档。http://xiazai.gimoo.net/201611/yuanma/jQueryEasyUI(gimoo.net).rarjQu

详解jQuery的Cookie插件
一、jQuery.Cookie.js插件是一个轻量级的Cookie管理插件。特别提醒，今日发现一个特别的错误，google浏览器提示：hasnomethod$.cookie。火狐浏览器提示:$.cookieisn

jQuery实现ToolTip元素定位显示功能示例
本文实例讲述了jQuery实现ToolTip元素定位显示功能的方法。分享给大家供大家参考，具体如下：!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR

编辑：广州明生堂生物科技有限公司

标签：空格,光标,边沿,坐标,位置