JS填写银行卡号每隔4位数字加一个空格


Posted in Javascript onDecember 19, 2016

1、原生js写法

!function () {
 document.getElementById('bankCard').onkeyup = function (event) {
  var v = this.value;
  if(/\S{5}/.test(v)){
   this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
  }
 };
}();

2、jQuery写法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<input type="text" id="J_BankCard"/>
<script src="http://static.ydcss.com/libs/jquery/1.11.2/jquery.js"></script>
<script>
 !function () {
  $('#J_BankCard').on('keyup mouseout input',function(){
   var $this = $(this),
    v = $this.val();
   /\S{5}/.test(v) && $this.val(v.replace(/\s/g,'').replace(/(.{4})/g, "$1 "));
  });
 }();
</script>
</body>
</html>

输入银行卡号,每隔4位数字加一个空格(小细节)

document.getElementById('bankCardInp').onkeyup = function (event) {
  var v = this.value;
  console.log(/\S{5}/.test(v));
  console.log(v);
  if(/\S{5}/.test(v)){
    this.value = v.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
  }
};

小编前段时间自己做了个小项目,用到正则,刚好百度了一下,诧异的发现输入银行卡号每隔4位数字加一个空格 居然全部都是清一色的一坨代码,上面大家估计都能理解,当然我整体也能理解: 问题来了

if(/\S{5}/.test(v)){正确执行}
不知道大家有没注意到,反正我是困惑到了一开始, /\S{5}/.test(v) 要为 true 才执行,刚开始以为必须5个空字符以上才执行,
尤为不解,但是认真看了下, \S 居然是大写,我大约知道原因了,我相信大家像我一样一般常用都用 \d \w \s 这些小写的
\D \W \S 大写我还真没用过或许我的能力原因吧, \S 是除了空字符 那上面的代码就海阔天空了。

银行卡号每隔4位插入空格 (再用户填写银行卡号的时候挺有用的) IE9+

<!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>

支付宝为了兼容 和 易用性, 是在悬浮一个提示框分开卡号的, 这种也比较容易实现

JS填写银行卡号每隔4位数字加一个空格

以上所述是小编给大家介绍的JS填写银行卡号每隔4位数字加一个空格,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
如何编写jquery插件
Mar 29 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 #Javascript
快速入门Vue
Dec 19 #Javascript
javascript中call,apply,bind函数用法示例
Dec 19 #Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 #Javascript
15个非常实用的JavaScript代码片段
Dec 18 #Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 #Javascript
简单实现node.js图片上传
Dec 18 #Javascript
You might like
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
javascript multibox 全选
2009/03/22 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python实现的栈(Stack)
2018/01/26 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python读写文件write和flush的实现方式
2020/02/21 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
医科大学生的自我评价
2013/12/04 职场文书
公司办公室岗位职责
2014/03/19 职场文书
母校寄语大全
2014/04/10 职场文书
辩护词范文大全
2015/05/21 职场文书
合同审查法律意见书
2015/06/04 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书