2016-07-15 62 views
0

我試圖自動確定信用卡類型。下面的代碼有效,但不適用於移動設備。我嘗試過爲移動設備找到解決方案,但目前我無法做到這一點。自動確定信用卡類型

這裏是jQuery的:

(function($) { 
    $.getCreditCardType = function(val) { 
    if(!val || !val.length) return undefined; 
    switch(val.charAt(0)) { 
     case '4': return 'visa'; 
     case '5': return 'mastercard'; 
     case '3': return 'amex'; 
     case '6': return 'discover'; 
    }; 
    return undefined; 
    }; 
    $.fn.creditCardType = function(options) { 
    var settings = { 
     target: '#credit-card-type', 
    }; 
    if(options) { 
     $.extend(settings, options); 
    }; 
    var keyupHandler = function() { 
     $("#credit-card-type li").removeClass("active"); 
     $("input[id=authorizenet_cc_type]").val(''); 
     switch($.getCreditCardType($(this).val())) { 
     case 'visa': 
      $('#credit-card-type .VI').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('VI'); 
      break; 
     case 'mastercard': 
      $('#credit-card-type .MC').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('MC'); 
      break; 
     case 'amex': 
      $('#credit-card-type .AE').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('AE'); 
      break; 
     case 'discover': 
      $('#credit-card-type .DI').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('DI'); 
      break; 
     }; 
    }; 
    return this.each(function() { 
     $(this).bind('keyup',keyupHandler).trigger('keyup'); 
    }); 
    }; 
})(jQuery); 

答:我加

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 

我會給予信貸斯科特,他提供的幫助。

回答

1

您是否嘗試過使用按鍵而不是鍵控?

$(this).keypress(function() { 

}); 

或使用您正在監控的輸入字段的輸入事件?

$(this).on('input', function() { 

}); 

編輯 - 回答你的問題

我真的不知道有什麼在你的代碼是怎麼回事斷章取義。我改變了範圍內的一些事情,這樣我就可以開展工作。

首先,我將假定HTML看起來像這樣。

<ul id="credit-card-type"> 
    <li> 
     <form> 
     <input type="text" id="credit-card-type" /> 
     <input type="text" id="authorizenet_cc_type" /> 
     </form> 
    </li> 
</ul> 

然後JS使用的輸入事件

 var getCreditCardType = function(val) { 
     if(!val || !val.length) return undefined; 
     switch(val.charAt(0)) { 
      case '4': return 'visa'; 
      case '5': return 'mastercard'; 
      case '3': return 'amex'; 
      case '6': return 'discover'; 
     } 
     return undefined; 
    } 



    var keyupHandler = function() { 
     console.log('test') 
     $("#credit-card-type li").removeClass("active"); 
     $("input[id=authorizenet_cc_type]").val(''); 
     switch(getCreditCardType($(this).val())) { 
     case 'visa': 
      $('#credit-card-type .VI').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('VI'); 
      break; 
     case 'mastercard': 
      $('#credit-card-type .MC').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('MC'); 
      break; 
     case 'amex': 
      $('#credit-card-type .AE').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('AE'); 
      break; 
     case 'discover': 
      $('#credit-card-type .DI').addClass('active'); 
      $("input[id=authorizenet_cc_type]").val('DI'); 
      break; 
     }; 
    }; 



    $('input#credit-card-type').on('input',keyupHandler); 
+0

如何將我的代碼工作?我對jQuery不太瞭解。 – Jad

+0

我用功能代碼更新了我的答案。 –

+0

這裏是我的工作小提琴https://jsfiddle.net/pxojzqo1/ –

-1

你可以嘗試使用外部API。

這將是微不足道的集成,您可以將服務器負載轉移到第三方,您可以獲得最新的信用卡BIN和IIN信息。

有圍繞提供了多種免費和付費的計劃:
https://iinapi.com/
https://www.neutrinoapi.com/

+2

https://stackoverflow.com/help/promotion –