开发者社区云计算文章正文

jq银行卡四位空格隔开

2023-09-15 31

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jq银行卡四位空格隔开

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>银行卡四位空格</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
    </style>
  </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>