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

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>

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

赞 (0)

相关推荐

  • JS代码随机生成姓名、手机号、身份证号、银行卡号

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器. 下面小编自己写的一个js生成器代码.随机生成姓名.手机号.身份证号.银行卡号的js代码. // 生成随机姓名 function getName(){ var familyNames = new Array( "赵", "钱", "孙", "李", "周", "吴", &

  • js格式化输入框内金额、银行卡号

    js格式化输入框内金额、银行卡号

    我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div cl

  • js实现模拟银行卡账号输入显示效果

    js实现模拟银行卡账号输入显示效果

    本文实例讲述了js实现模拟银行卡账号输入显示效果.分享给大家供大家参考,具体如下: 先来看运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-bank-card-input-style-codes/ 具体代码如下: <script language="javascript" type="text/javascript"> function www_jb51_net (BankNo) { if (B

  • js随机生成姓名、手机号、身份证号、银行卡号【实现代码】

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器.能不能自己写一个简单的生成器呢.下面是随机生成姓名.手机号.身份证号.银行卡号的js代码. // 生成随机姓名 function getName(){ var familyNames = new Array( "赵", "钱", "孙", "李", "周", "吴", &

  • js手机号4位显示空格，银行卡每4位显示空格效果

    开发有时候会遇到输入手机号和银行卡号,按照每4位显示一个空格的需求,方便用户阅读,如果是纯展示,就很容易实现,如果是一边输入一边展示则有点难度 有人用两个input实现,一个负责输入数据,但是透明看不见,另外一个展示在界面上,变相的解决了这个需求(手机上可调用数字键盘) 本次取巧写个demo,只用一个input用定时器不断的查询输入的字符来判断输入的数据(无法直接调用数字键盘,因为里边有空格) 如果是银行卡号,将字符判断长度更改为,也可以根据实际需求来判断长度 lastLen === 5 ||

  • nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例

    nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例

    http模块内部封装了http服务器和客户端,因此Node.js不需要借助Apache.IIS.Nginx.Tomcat等传统HTTP服务器,就可以构建http服务器,亦可以用来做一些爬虫.下面简单介绍该模块的使用,其具体API,大家可以自行去nodejs官方文档查看. 1.http.Server服务器 使用http.createServer([requestListener])方法创建一个http服务器,该方法返回一个新的http.Server实例,如果指定了requestListener,则

  • js jquery验证银行卡号信息正则学习

    jquery代码 复制代码 代码如下: $("#bankAccountNumber").change(function(){ alert("1"); var account = $("channelForm.bankAccount.account").val(); alert("2"); var reg = /^\d{19}$/g; // 以19位数字开头,以19位数字结尾 if( !reg.test(account) ) {

  • JavaScript中校验银行卡号的实现代码

    1.先引入jquery.js 2.接着引入luhmCheck.js //银行卡号Luhm校验 3.看下面的案例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

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

    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 la

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

    难点不是插入空格,而是修正光标的位置,这个只支持IE9+.chrome浏览器 注意:这个使用了jquery框架 核心代码 $(function() { $('#kahao').on('keyup', function(e) { //只对输入数字时进行处理 if((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105 )){ //获取当前光标的位置 var caret =

  • Java如何实现字符串每隔4位加空格

    目录 字符串每隔4位加空格 1.正则表达式实现 2.java代码实现 字符串每4位添加一个符号 字符串每隔4位加空格 今天弄了个银行卡识别功能,回显的时候想要将银行卡号每四位加一个空格,这样核对卡号会方便很多,这里记录一下 1.正则表达式实现 String bankCard = authStatus.getBankCard(); String bankCard = "1234567890"; String regex = "(.{4})"; bankCard = b

  • iOS开发之数字每隔3位用逗号分隔

    iOS开发之数字每隔3位用逗号分隔

    demo: 源码下载:http://xiazai.jb51.net/201709/yuanma/DMLimtDemo_jb51.rar 之前做电商类APP时,针对稍大的金额展示时,需要每隔千位添加逗号便于用户识别. 逻辑比较简单,这里按需要写了一个可选前后缀的一个转换方法: #import "DMViewController.h" @interface DMViewController () @property (weak, nonatomic) IBOutlet UITextFiel

  • JS正则表达式匹配检测各种数值类型(数字验证)

    验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^\+?[1-9][0-9]*$ 验证非零的负整数:^\-[1-9][0-9]*$ 验证非负整数(正整数 + 0) ^\d

  • js中使用正则表达式查找字母和数字的方法

    废话不多说,先看下js中使用正则查找字母和数字的方法,具体代码如下所示: <!DOCTYPE HTML> <html > <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ localStorage.fiveData="

  • JS实现至少包含字母、大小写数字、字符的密码等级的两种方法

    本文实例讲述了JS实现至少包含字母.大小写数字.字符的密码等级的两种方法.分享给大家供大家参考.具体如下: 前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是字母.数字.字符3选2,区分大小写.对于设置得太简单的密码,予以错误提示.或者予以密码等级(低中高)显示,让用户设置高级密码.那如何利用JS实现呢? 实现代码如下: function passwordLevel(password) { var Modes = 0; for (i = 0; i <

  • JavaScript仿支付宝6位数字密码输入框

    JavaScript仿支付宝6位数字密码输入框

    前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c

  • jQuery实现6位数字密码输入框

    下个月就要过年了,感觉有点瞎忙.翻了翻博客,感觉这个月都在打酱油啊.借口那么多,其实真的有点懒了,呵呵! 我争取在放假前,将自我总结以及来年计划发出来,把自己打造为勉族,不然真要浑噩度日了. 前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <i

  • JavaScript实现淘宝京东6位数字支付密码效果

    京东淘宝的密码输入框功能点 只能输入数字 只能输入6位字符 每次输入一个字符,对应位置的小黑点显示 每次删除一个字符,对应位置的小黑点消失 实现思路 1.写好6位密码输入框的静态样式和html结构 2.将密码输入框input定位到父容器,覆盖之前写好的6位密码输入框区域,并设置为透明 3.虽然设置了密码输入框为透明,但当密码输入框获得焦点的时候,输入框的光标会显示出来,并不是透明状态.为了解决这个问题,暂时想到了两种方法,第一种,利用css将光标也设置为透明,不过这种方法有一定的兼容问题:第二种

随机推荐