クレジットカードの種類を自動的に決定する

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

ANSWER：私は彼が提供されるヘルプのためにスコットに信用を与えるだろう

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

を追加しました。

Answer 1

keyupの代わりにkeypressを使ってみましたか？

$(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あなたは、外部APIを使用して試みることができる入力イベント

 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

を使用。

統合するのは簡単ですが、サーバの負荷をサードパーティに移管し、最新のクレジットカードのBINとIIN情報を入手することができます。

あり自由にそのプランの周りのいくつかがあると計画を支払っ：
https://iinapi.com/
https://www.neutrinoapi.com/