title: Auto-format credit card number input as user types
body: <p>I want to create an input using JavaScript that automatically formats it in the correct Credit Card format.</p>
  
  <p><strong>What I Want?</strong></p>
  
  <ol>
  <li>The input should format input in groups of 4. e.g. If I typed in <code>1234567890123456</code>, it should format it to <code>1234 5678 9012 3456</code></li>
  <li>The max length should be 16 digits. So if I typed in <code>1234567890123456789</code> it should format it to "1234 5678 9012 3456"</li>
  <li>formatting should occur as you type. So if I typed "123456" it should format it to "1234 56"</li>
  <li>Invalid characters should be ignored. So if I typed in <code>564adsd299  474</code> it should format it to "5642 9947 4"</li>
  </ol>
  
  <p>The input should also respect traditional behaviour of the textbox. (The <code>|</code> here resembles the cursor e.g.</p>
  
  <p>If I typed in 8 when the input is:</p>
  
  <ol start="5">
  <li><code>1234 5|67</code> it should turn to <code>1234 58|67</code></li>
  <li><code>1234|</code>, it should turn to <code>1234 8</code> </li>
  <li><code>1234| 567</code> it should turn to <code>1234 8567</code></li>
  <li><code>1234| 5679</code> it should turn to <code>1234 8567 9</code></li>
  </ol>
  
  <p>If I delete the previous character when the input is:</p>
  
  <ol start="9">
  <li><code>1234 5|67</code> it should turn to <code>1234 |67</code></li>
  <li><code>1234 |567</code> it should turn to <code>1234| 567</code></li>
  <li><code>1234| 567</code> it should turn to <code>123|5 67</code></li>
  </ol>
  
  <p>More test cases is likely to follow.</p>
  
  <p><strong>Example</strong></p>
  
  <p>Basically it should behave exactly like the "Enter card details" used in Google Play Store. To find this page: Open Play Store on an Android device > Click Account > Payment methods > Add credit or debit card. This screen can also be found here: <a href="https://play.google.com/store/account" rel="nofollow noreferrer">https://play.google.com/store/account</a></p>
  
  <p><strong>What I have so far?</strong></p>
  
  <p>This is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var txtCardNumber = document.querySelector("#txtCardNumber");
  txtCardNumber.addEventListener("input", onChangeTxtCardNumber);
  
  function onChangeTxtCardNumber(e) {  
      var cardNumber = txtCardNumber.value;
   
     // Do not allow users to write invalid characters
      var formattedCardNumber = cardNumber.replace(/[^\d]/g, "");
      formattedCardNumber = formattedCardNumber.substring(0, 16);
    
      // Split the card number is groups of 4
      var cardNumberSections = formattedCardNumber.match(/\d{1,4}/g);
      if (cardNumberSections !== null) {
          formattedCardNumber = cardNumberSections.join(' '); 
      }
   
      console.log("'"+ cardNumber + "' to '" + formattedCardNumber + "'");
    
      // If the formmattedCardNumber is different to what is shown, change the value
      if (cardNumber !== formattedCardNumber) {
          txtCardNumber.value = formattedCardNumber;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="txtCardNumber"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above formats the credit number perfectly, but the issues begin when I want to edit.</p>
  
  <p>However, the above does not satisfy test cases 5 onward, as the cursor just jumps to the end.</p>
  
  <p>How can I achieve this behaviour. I know it's possible as Google has done it already.</p>
  
  <p>(Please no use PayPal answers)</p>
  
  <p><strong>Edit:</strong> Note that I am looking for native JavaScript solutions, however feel free to suggest plugins as comments. The exception is libraries with little to no dependencies so it's possible to just copy the source code.</p>
  
  <p>I've also removed jQuery on the above code to encourage native JS solutions.</p>