Automatische Ermittlung des Kreditkarten-Typs

Question

Ich versuche, den Kreditkarten-Typ automatisch zu bestimmen. Der folgende Code funktioniert, aber nicht auf Mobilgeräten. Ich habe versucht, eine Lösung für Mobilgeräte zu finden, kann dies aber derzeit nicht tun.

Hier ist die 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); 

ANTWORT: I

hinzugefügt

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

I Kredit Scott für die Hilfe geben, wird er zur Verfügung gestellt.

Answer 1

Haben Sie versucht, mit Tastendruck anstelle von keyup?

$(this).keypress(function() { 

}); 

oder das Eingangsereignis des Eingabefelds verwenden, das Sie überwachen?

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

}); 

EDIT - Wir beantworten Ihre Frage

Ich war nicht wirklich sicher, was aus dem Zusammenhang in Ihrem Code vorging. Ich habe ein paar Dinge im Scoping geändert, nur damit ich die Dinge zum Laufen bringen konnte.

Zunächst einmal gehe ich davon aus, dass das HTML in etwa so aussieht.

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

Dann mit der JS des Eingabeereignis

 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

Sie könnten versuchen, eine externe API.

Es wäre trivial zu integrieren, Sie können die Serverlast auf eine dritte Partei übertragen und Sie können aktuelle Informationen zu BIN und IIN der Kreditkarte erhalten.

Es gibt mehrere um dieses Angebot kostenlos und bezahlt Pläne:
https://iinapi.com/
https://www.neutrinoapi.com/