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 相关文章推荐
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python 从列表中取值和取索引的方法
2018/12/25 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
教师节活动主持词
2014/04/02 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
暑期实践个人总结
2015/03/06 职场文书
消防安全主题班会
2015/08/12 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
浅谈node.js中间件有哪些类型
2021/04/29 Javascript