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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
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中的integer类型使用分析
2010/07/27 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
纠纷协议书
2014/04/16 职场文书
春秋淹城导游词
2015/02/11 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Nginx快速入门教程
2021/03/31 Servers
如何使用PyCharm及常用配置详解
2021/06/03 Python
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers