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 AJAX 框架的使用方法
Nov 03 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
怎样使用Python脚本日志功能
2016/08/14 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
高中学生干部学习的自我评价
2014/02/21 职场文书
小学生期末评语大全
2014/04/21 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
遗失证明范文
2015/06/19 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL