欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js格式化輸入框內(nèi)金額、銀行卡號(hào)

 更新時(shí)間：2016年02月01日 09:23:48   作者：耶特先生  
這篇文章主要介紹了js格式化輸入框內(nèi)金額、銀行卡號(hào)，采用“keyup”事件處理格式化，每4位數(shù)一組中間空格隔開(kāi)，如何格式化輸入框內(nèi)金額、銀行卡號(hào)，需要了解的朋友可以參考一下

我們?cè)陧?xiàng)目中經(jīng)常遇到需要格式化的金額數(shù)和銀行卡號(hào)，一般我們常見(jiàn)的有兩種表現(xiàn)形式：輸入框內(nèi)格式化和輸入框外格式化。這里我主要把我在項(xiàng)目中遇到的輸入框內(nèi)部格式化的，代碼亮出來(lái)，框外的格式化相對(duì)簡(jiǎn)單一點(diǎn)。

頁(yè)面代碼：

<div class="wrap">
  <input type="text" id="bankCard" placeholder="輸入銀行卡號(hào)">
</div>
 
<div class="wrap">
  <input type="text" id="moneyNum" placeholder="輸入金額">
</div>

 銀行卡號(hào)格式化

//卡號(hào)每4位一組格式化
    $("#bankCard").on("keyup", formatBC);
 
    function formatBC(e){
 
      $(this).attr("data-oral", $(this).val().replace(/\ +/g,""));
      //$("#bankCard").attr("data-oral")獲取未格式化的卡號(hào)
 
      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位數(shù)一組中間空格隔開(kāi)。但是數(shù)據(jù)格式化以后又不利于計(jì)算，所以給當(dāng)前元素添加一個(gè)屬性“data-oral”，保存未處理的數(shù)字，這樣計(jì)算或者要傳遞到后臺(tái)可以獲取“data-oral”的值。

金額格式化
金額格式化和銀行卡號(hào)格式化類似，但又有點(diǎn)不同，因?yàn)榻痤~每3位數(shù)一組用逗號(hào)隔開(kāi)，一般最后有小數(shù)點(diǎn)且保留兩位有效數(shù)字。這里我開(kāi)始用到“keyup”和"change"事件，但是IE瀏覽器對(duì)于change事件存在兼容問(wèn)題，可以改用focus和blur事件代替。

類似給元素添加屬性“data-oral”保存未格式化的數(shù)字。

/*
    * 金額每3位數(shù)一組逗號(hào)隔開(kāi)格式化
    * 1.先把非數(shù)字的都替換掉
    * 2.由于IE瀏覽器對(duì)于change事件存在兼容問(wèn)題，改用focus和blur事件代替。
    * */
    $("#moneyNum").on("keyup", formatMN);
 
    $("#moneyNum").on({
      focus: function(){
        $(this).attr("data-fmt",$(this).val()); //將當(dāng)前值存入自定義屬性
      },
      blur: function(){
        var oldVal=$(this).attr("data-fmt"); //獲取原值
        var newVal=$(this).val(); //獲取當(dāng)前值
        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")獲取未格式化的金額
    }

其實(shí)我覺(jué)得，輸入框外的格式化更合理一些，大多數(shù)都是輸入框外部格式化的，我寫(xiě)了個(gè)例子也拉出來(lái)吧。

輸入框外部格式化卡號(hào)
原理很簡(jiǎn)單，就是隱藏一個(gè)顯示格式化的模塊，當(dāng)輸入框獲取焦點(diǎn)時(shí)顯示，失去焦點(diǎn)時(shí)隱藏即可。

頁(yè)面代碼：

<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>

格式化代碼：

/* 銀行卡號(hào)實(shí)時(shí)驗(yàn)證放大顯示 */
$(".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();
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論