自动判断信用卡类型

Question

我正在尝试自动确定信用卡类型。下面的代码有效，但不适用于移动设备。我试过寻找移动解决方案，但目前无法找到。

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

我要感谢 Scott 提供的帮助。

Answer 1

您是否尝试过使用 keypress 而不是 keyup？

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

Answer 2

您可以尝试使用外部 API。

集成起来很简单，您可以将服务器负载转移给第三方，您可以获得最新的信用卡 BIN 和 IIN 信息。

周围有几个提供免费和付费计划：
https://iinapi.com/
https://www.neutrinoapi.com/

自动判断信用卡类型

Automatically Determine Credit Card Type

mobile

jquery

credit-card