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 input in groups of 4. e.g. If I typed in
1234567890123456
, it should format it to1234 5678 9012 3456
- The max length should be 16 digits. So if I typed in
1234567890123456789
it should format it to "1234 5678 9012 3456" - formatting should occur as you type. So if I typed "123456" it should format it to "1234 56"
- 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:
1234 5|67
it should turn to1234 58|67
1234|
, it should turn to1234 8
1234| 567
it should turn to1234 8567
1234| 5679
it should turn to1234 8567 9
If I delete the previous character when the input is:
1234 5|67
it should turn to1234 |67
1234 |567
it should turn to1234| 567
1234| 567
it should turn to123|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:
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"/>
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 input in groups of 4. e.g. If I typed in
1234567890123456
, it should format it to1234 5678 9012 3456
- The max length should be 16 digits. So if I typed in
1234567890123456789
it should format it to "1234 5678 9012 3456" - formatting should occur as you type. So if I typed "123456" it should format it to "1234 56"
- 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:
1234 5|67
it should turn to1234 58|67
1234|
, it should turn to1234 8
1234| 567
it should turn to1234 8567
1234| 5679
it should turn to1234 8567 9
If I delete the previous character when the input is:
1234 5|67
it should turn to1234 |67
1234 |567
it should turn to1234| 567
1234| 567
it should turn to123|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./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 ments. 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.
Share Improve this question edited Jul 26, 2017 at 16:17 Yahya Uddin asked Jul 25, 2017 at 19:40 Yahya UddinYahya Uddin 29k40 gold badges157 silver badges247 bronze badges 02 Answers
Reset to default 4I 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./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<input id="txtCardNumber"/>
This should work:
var format = [9, 2, 3,5,5,5,5,5,5,5,4, 5, 5, 5, 54, 4, 4, 4, 4, 4, 4, 4,
4, 4].map((data, index) => {
if ((index + 1) % 4 == 0) {
data = data + " "
}
return data
})
format= format.join("")
console.log("format", format)