输入框外部格式化卡号

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

页面代码：

<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();
});

 

 

/* 银行卡号实时验证放大显示 */

$( ".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();

});