title: jQuery - How to mask credit card number during input?
body: <p>My goal is to have a form similar to <a href="http://jquerycreditcardvalidator.com/" rel="noreferrer">http://jquerycreditcardvalidator.com/</a>. Ive tried viewing the source code of that page, but it is beyond my expertise, so I tried to rewrite the code using jquery. I also want to mask the input after the first 2 digits are typed.</p>
  
  <p>The problem:</p>
  
  <p>Clearing the displayed CC image,  appears to only work on FireFox, and is unpredictable.
  Once the input is masked to conform to the credit card type, the cursor is thrown to the end of the input box</p>
  
  <p>What am I doing wrong here? There has to be a much simpler way to do this</p>
  
  <p><strong>Fidle with code</strong>:<a href="http://jsfiddle.net/nh7qqfgx/" rel="noreferrer">http://jsfiddle.net/nh7qqfgx/</a></p>
  
  <p>(for the sake of convince, colored rectangular divs are placeholders for the actual card logos)</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>$('#ccnumber').validateCreditCard(function (result) {
          // this will execute everytime the value of the `#cc_number` field changes
  
  
  
          if (result.card_type == null) {
              $("#ccHolder").removeClass();
  
          }
          if (result.card_type != null) {
              cardtype = result.card_type.name;
  
  
              $("#ccHolder").addClass(result.card_type.name);
  
              if (result.card_type.name === 'visa') { //if the card is Visa
                  $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });
  
              }
              if (result.card_type.name === 'amex') { //if the card is American Express
                  $("#ccnumber").mask("999-999999-999999", { placeholder: " ", autoclear: false });
  
              }
              if (result.card_type.name === 'mastercard') { //if the card is MasterCard
                  $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });
  
              }
              if (result.card_type.name === 'discover') { //if the card is Discover
                  $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });
  
              }
              if (result.card_type.name === 'JCB') { //if the card is JCB
                  $("#ccnumber").mask("9999-9999-9999-9999", { placeholder: " ", autoclear: false });
  
              }
              if (result.card_type.name === 'Diners Club') { //if the card is Diners Club
                  $("#ccnumber").mask("999-999999-99999", { placeholder: " ", autoclear: false });
              }
  
          }
      });
  </code></pre>