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 17 Javascript
Javascript 布尔型分析
Dec 22 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
详解小程序循环require之坑
Mar 08 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
element中的$confirm的使用
2020/04/26 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python3中的bytes和str类型详解
2019/05/02 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
产品陈列协议书(标准版)
2014/09/17 职场文书
小学四年级学生评语
2014/12/26 职场文书
世界环境日活动总结
2015/02/11 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python