JS formatted input box amount, bank card number _javascript tips

We often encountered in the project needs to format the amount and the bank card number, generally we usually have two kinds of manifestation: the input box formatting and the input box outside formatting. Here I mainly in the project encountered in the internal format of the input box, the code light out, the box outside the format is relatively simple.

Page code:

<div class= "wrap" >
  <input type= "text" id= "Bankcard" placeholder= "input bank card number" >
</div>
 
<div class= "wrap" >
  <input type= "text" id= "moneynum" placeholder= "input Amount" >
</div>

Bank card number Format

The card number is formatted
    $ ("#bankCard") per 4-digit group. On ("KeyUp", FORMATBC);
 
    function FORMATBC (e) {
 
      $ (this). attr ("Data-oral", $ (this). Val (). replace (/\ +/g, ""));
      $ ("#bankCard"). attr ("Data-oral") gets the unformatted card number
 
      var self = $.trim (e.target.value);
      var temp = this.value.replace (/\d/g, '). Replace (/(...) (?=.) /g, ' $ ');
      if (Self.length >) {
        this.value = self.substr (0);
        return this.value;
      }
      if (temp!= this.value) {
        this.value = temp;
      }
    }
 

This is formatted with "KeyUp" event handling, separated by a set of intermediate spaces per 4 digits. However, the data format is not conducive to calculation, so add an attribute "Data-oral" to the current element, save the unhandled number, so that the calculation or pass to the background can get "data-oral" value.

The amount of the format
The amount format is similar to the bank card number format, but is somewhat different because the amount is separated by commas for each 3-digit group, usually with a decimal point and a two-digit valid number. Here I started using the "KeyUp" and "change" events, but IE browsers have compatibility issues with the Change event, which can instead be replaced with focus and Blur events .

Similar to adding an attribute "data-oral" to an element saves unformatted numbers.

* * * The amount is separated by a comma of 3 digits, formatted * 1. Replace the non-number with * 2. Because IE browsers have compatibility issues with change events, focus and blur events instead.
 
    * */$ ("#moneyNum"). On ("KeyUp", FORMATMN);
      $ ("#moneyNum"). On ({focus:function () {$ (a). attr ("Data-fmt", $ (this). Val ());///deposit current value into custom properties},  Blur:function () {var oldval=$ (this). attr ("data-fmt");//Get the original value var newval=$ (this). Val ();//Get current value 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") gets unformatted amount}

In fact, I think, the format outside the input box more reasonable, most of the input box outside the format, I wrote an example also pull out.

Format the card number outside of the input box
The principle is very simple, is to hide a display format of the module, when the input box to get the focus of the display, lost focus can be hidden.

Page code:

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

Format code:

/* Bank card number real-time verification zoom display/$ (". Inputcard"). KeyUp (function (e) {var self = $.trim (e.target.value), parent = $ (e.target). Close
  St (". Inputcard-wrap"), panel = $ (". Panelcard", parent), val = Self.replace (/\d/g, "");
    if (Self.length >) {this.value = self.substr (0, 18);
  return this.value;
    } if (val = = self) {panel.show (); val = self.replace (/(...) (?=.)
    /g, ' $ ');
  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 (". INPUTC Ard-wrap "), panel = $ (". Panelcard ", parent), val = Self.replace (/(...) (?=.)
  /g, ' $ ');
    if (Val!= ') {panel.show ();
  Panel.html (Val);
}
});
$ (". Inputcard"). Unbind (' focusout '); $ (". Inputcard"). Bind (' Focusout ', function (e) {var parent = $ (e.target). Closest (". Inputcard-wrap"), panel = $ (". PANELC
  ARD ", parent);
Panel.hide (); });

The above is the entire content of this article, I hope to help you learn.