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


Posted in Javascript onFebruary 01, 2016

我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化。这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点。

页面代码:

<div class="wrap">
  <input type="text" id="bankCard" placeholder="输入银行卡号">
</div>
 
<div class="wrap">
  <input type="text" id="moneyNum" placeholder="输入金额">
</div>

 银行卡号格式化

//卡号每4位一组格式化
    $("#bankCard").on("keyup", formatBC);
 
    function formatBC(e){
 
      $(this).attr("data-oral", $(this).val().replace(/\ +/g,""));
      //$("#bankCard").attr("data-oral")获取未格式化的卡号
 
      var self = $.trim(e.target.value);
      var temp = this.value.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
      if(self.length > 22){
        this.value = self.substr(0, 22);
        return this.value;
      }
      if(temp != this.value){
        this.value = temp;
      }
    }

这里用“keyup”事件处理格式化,每4位数一组中间空格隔开。但是数据格式化以后又不利于计算,所以给当前元素添加一个属性“data-oral”,保存未处理的数字,这样计算或者要传递到后台可以获取“data-oral”的值。

金额格式化
金额格式化和银行卡号格式化类似,但又有点不同,因为金额每3位数一组用逗号隔开,一般最后有小数点且保留两位有效数字。这里我开始用到“keyup”和"change"事件,但是IE浏览器对于change事件存在兼容问题,可以改用focus和blur事件代替

类似给元素添加属性“data-oral”保存未格式化的数字。

/*
    * 金额每3位数一组逗号隔开格式化
    * 1.先把非数字的都替换掉
    * 2.由于IE浏览器对于change事件存在兼容问题,改用focus和blur事件代替。
    * */
    $("#moneyNum").on("keyup", formatMN);
 
    $("#moneyNum").on({
      focus: function(){
        $(this).attr("data-fmt",$(this).val()); //将当前值存入自定义属性
      },
      blur: function(){
        var oldVal=$(this).attr("data-fmt"); //获取原值
        var newVal=$(this).val(); //获取当前值
        if (oldVal!=newVal) {
          if(newVal == "" || isNaN(newVal)){
            this.value = "";
            return this.value;
          }
          var s = this.value;
          var temp;
 
          if(/.+(\..*\.|\-).*/.test(s)){
            return;
          }
          s = parseFloat((s + "").replace(/[^\d\.\-]/g, "")).toFixed(2) + "";
          var l = s.split(".")[0].split("").reverse(),
              r = s.split(".")[1];
          t = "";
          for(i = 0; i < l.length; i ++ ) {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length && (l[i+1]!='-')? "," : "");
          }
          temp = t.split("").reverse().join("") + "." + r;
          this.value = temp;
          return this.value;
        }
      }
    });
 
    function formatMN(e){
      this.value = this.value.replace(/[^\d\.\-]/g,"");
      $(this).attr("data-oral", parseFloat(e.target.value.replace(/[^\d\.-]/g, "")));
      //$("#moneyNum").attr("data-oral")获取未格式化的金额
    }

其实我觉得,输入框外的格式化更合理一些,大多数都是输入框外部格式化的,我写了个例子也拉出来吧。

输入框外部格式化卡号
原理很简单,就是隐藏一个显示格式化的模块,当输入框获取焦点时显示,失去焦点时隐藏即可。

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

页面代码:

<div class="inputCard-wrap">
  <input type="text" class="inputCard">
  <div class="panelCard"></div>
</div>
 
<style type="text/css">
  .inputCard-wrap{
    position: relative;
  }
  .inputCard-wrap .panelCard{
    display: none;
    position: absolute;
    top:-34px;
    left:0;
    z-index: 100;
    background-color:#fff9da;
    border:1px #ffce6e solid;
    padding:10px;
    height:40px;
    font-size: 1.7em;
    line-height:18px;
    color:#585858;
  }
</style>

格式化代码:

/* 银行卡号实时验证放大显示 */
$(".inputCard").keyup(function(e){
  var self = $.trim(e.target.value),
    parent = $(e.target).closest(".inputCard-wrap"),
    panel = $(".panelCard", parent),
    val = self.replace(/\D/g, '');
  if(self.length > 18){
    this.value = self.substr(0, 18);
    return this.value;
  }
  if(val == self){
    panel.show();
    val = self.replace(/(....)(?=.)/g, '$1 ');
    panel.html(val);
  }else{
    panel.hide();
    return self;
  }
});
$(".inputCard").unbind('focusin');
$(".inputCard").bind('focusin',function(e){
  var self = $.trim(e.target.value),
    parent = $(e.target).closest(".inputCard-wrap"),
    panel = $(".panelCard", parent),
    val = self.replace(/(....)(?=.)/g, '$1 ');
  if(val != '') {
    panel.show();
    panel.html(val);
  }
});
$(".inputCard").unbind('focusout');
$(".inputCard").bind('focusout',function(e){
  var parent = $(e.target).closest(".inputCard-wrap"),
    panel = $(".panelCard", parent);
  panel.hide();
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 #Javascript
JavaScript中eval函数的问题
Jan 31 #Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 #Javascript
JavaScript中的this机制
Jan 30 #Javascript
实现高性能JavaScript之执行与加载
Jan 30 #Javascript
深入探秘jquery瀑布流的实现
Jan 30 #Javascript
深入分析Javascript事件代理
Jan 30 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
PHP 实现重载
2021/03/09 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JS模拟键盘打字效果的方法
2015/08/05 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
深入理解Node module模块
2018/03/26 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python tornado上传文件的功能
2020/03/26 Python
Python 在函数上添加包装器
2020/07/28 Python
大学生物业管理求职信
2013/10/24 职场文书
安全生产检查通报
2014/01/29 职场文书
国家助学金获奖感言
2014/01/31 职场文书
我的求职择业计划书
2014/04/04 职场文书
调解协议书
2014/04/16 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
全国文明单位申报材料
2014/05/31 职场文书
学用政策心得体会
2014/09/10 职场文书
运动会广播稿100字
2015/08/19 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
写好Python代码的几条重要技巧
2021/05/21 Python