Auto-format credit card number input as user types

Question

I want to create an input using JavaScript that automatically formats it in the correct Credit Card format.

What I Want?

1. The input should format input in groups of 4. e.g. If I typed in 1234567890123456, it should format it to 1234 5678 9012 3456
2. The max length should be 16 digits. So if I typed in 1234567890123456789 it should format it to "1234 5678 9012 3456"
3. formatting should occur as you type. So if I typed "123456" it should format it to "1234 56"
4. Invalid characters should be ignored. So if I typed in 564adsd299 474 it should format it to "5642 9947 4"

The input should also respect traditional behaviour of the textbox. (The | here resembles the cursor e.g.

If I typed in 8 when the input is:

5. 1234 5|67 it should turn to 1234 58|67
6. 1234|, it should turn to 1234 8
7. 1234| 567 it should turn to 1234 8567
8. 1234| 5679 it should turn to 1234 8567 9

If I delete the previous character when the input is:

9. 1234 5|67 it should turn to 1234 |67
10. 1234 |567 it should turn to 1234| 567
11. 1234| 567 it should turn to 123|5 67

More test cases is likely to follow.

Example

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: https://play.google.com/store/account

What I have so far?

This is what I have so far:

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

<input id="txtCardNumber"/>

The above formats the credit number perfectly, but the issues begin when I want to edit.

However, the above does not satisfy test cases 5 onward, as the cursor just jumps to the end.

How can I achieve this behaviour. I know it's possible as Google has done it already.

(Please no use PayPal answers)

Edit: 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.

I've also removed jQuery on the above code to encourage native JS solutions.

Answer 1

I see you're using jQuery, rather than try to solve this logic yourself you could consider using a masked input plugin. I chose this one simply because it came up first in a search. There are customization options and it appears to satisfy all your requirements.

$('#txtCardNumber').mask("9999 9999 9999 9999");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<input id="txtCardNumber"/>