Automatic credit card number input format as user type

Question

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

What I want?

• The input should format the input in groups of 4, for example. If I dialed 1234567890123456 , it should format it to 1234 5678 9012 3456
• The maximum length must be 16 digits. Therefore, if I dialed 1234567890123456789 , it should format it to "1234 5678 9012 3456"
• formatting should occur as you type. Therefore, if I dialed "123456", it should format it to "1234 56"
• Incorrect characters should be ignored. Therefore, if I dialed 564adsd299 474 , he should format it to "5642 9947 4"

Input should also take into account the traditional behavior of the text field. ( | here resembles a cursor, for example.

If I typed 8 when input:

5. 1234 5|67 he should go to 1234 58|67
6. 1234| he must turn to 1234 8
7. 1234| 567 1234| 567 he must go to 1234 8567
8. 1234| 5679 1234| 5679 he must turn to 1234 8567 9

If I delete the previous character when input:

9. 1234 5|67 he must turn to 1234 |67
10. 1234 |567 he must go to 1234| 567 1234| 567
11. 1234| 567 1234| 567 he must turn to 123|5 67

Most likely, other test cases will follow.

Example

Basically, it should behave exactly like the “Enter card details” used in the Google Play Store. To find this page: Open the Play Store on your Android device> Click on "Account"> "Payment methods"> "Add credit or debit card." This screen can also be found here: https://play.google.com/store/account

What do 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 credit number format is excellent, but problems begin when I want to edit.

However, the above does not satisfy test cases 5, since the cursor simply skips to the end.

How can I achieve this behavior. I know this is possible since Google has already done this.

(Please do not use PayPal answers)

Edit: Please note that I am looking for my own JavaScript solutions, but feel free to suggest plugins as comments. Libraries with minor dependencies are an exception, so you can simply copy the source code.

I also uninstalled jQuery in the above code to encourage JS native solutions.

Answer 1

I see that you are using jQuery, instead of trying to solve this logic yourself, you might consider using a masked input plugin. I chose this one simply because it appeared first in the search. There are settings and seem 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"/>