Автоматическое определение типа кредитной карты

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> 

Я дам кредит Скотту за помощь он оказывал.

Answer 1

Вы пытались использовать keypress вместо keyup?

$(this).keypress(function() { 

}); 

или используя входное событие поля ввода, которое вы контролируете?

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

}); 

EDIT - Отвечая на ваш вопрос

Я не был уверен, что происходит в вашем коде из контекста. Я изменил некоторые вещи в области только для того, чтобы я мог заставить все работать.

Во-первых, я собираюсь предположить, что 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/