I want to create an input using JavaScript that automatically formats it in the correct Credit Card format.
What I Want?
1234567890123456
, it should format it to 1234 5678 9012 3456
1234567890123456789
it should format it to "1234 5678 9012 3456"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 eg
If I typed in 8 when the input is:
1234 5|67
it should turn to 1234 58|67
1234|
, it should turn to 1234 8
1234| 567
1234| 567
it should turn to 1234 8567
1234| 5679
1234| 5679
it should turn to 1234 8567 9
If I delete the previous character when the input is:
1234 5|67
it should turn to 1234 |67
1234 |567
it should turn to 1234| 567
1234| 567
1234| 567
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.
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"/>
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.