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 相关文章推荐
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
javascript中Object使用详解
Jan 26 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
js获取Get值的方法
Sep 29 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 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 whois查询API制作方法
2011/06/23 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
python 显示数组全部元素的方法
2018/04/19 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python enumerate内置库用法解析
2020/02/24 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
年度考核自我评价
2014/01/25 职场文书
工作犯错保证书
2015/05/11 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技