频道导航

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

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了js格式化输入框内金额、银行卡号，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

银行卡号格式化

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”保存未格式化的数字。

$("#moneyNum").on({
  focus: function(){
    $(this).attr("data-fmt",$(this).val()); //将当前值存入<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a><a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>
  },blur: function(){
    var oldVal=$(this).attr("data-fmt"); //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>原值
    var newVal=$(this).val(); //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>当前值
    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")<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>未格式化的金额
}

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

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

页面代码：

格式化代码：

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),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"),parent); panel.hide(); });

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

js格式化金额 js格式化银行卡号